Easiest way to set the height of these divs to be equal?

Discussion in 'HTML & Website Design' started by Josh-H, Aug 20, 2012.

0
  1. #1
    Heya, my design is a category page on a wordpress blog, and it consists of a grid of 3 columns. The content is dynamic and I need the row's divs to be equal to the height of the largest box in that row.

    Here is an image of it currently, I've simply set the height of the boxes to 400px

    [​IMG]

    I've tried this jquery plugin, but it interferes with another jquery script/plugin of mine and stops it working for some reason. http://www.cssnewbie.com/equalheights-jquery-plugin/

    Is there an easier way to do this? The page has infinity scroll and I've got each row of boxes to have a numbered class (1,2,3,4 etc) so I can target them with a script. I just need the right one!

    Any help will be greatly appreciated, thanks!
     
    Josh-H, Aug 20, 2012 IP
  2. ashishkg

    ashishkg Active Member

    Messages:
    233
    Likes Received:
    8
    Best Answers:
    3
    Trophy Points:
    68
    #2
    I will help you please PM me..
    will set normally without any plugins
     
    ashishkg, Aug 20, 2012 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Don't... equal width, and more so equal height containers for content are 'not viable for web deployment' if you actually care about accessibility. For every site you see this type of IDIOCY on, you've found a site that's an accessibility train wreck. Equal width more often than not saddles you with a fixed width, so kiss off fluid or responsive layout, and fixed height as you are discovering means you can't have the content go changing size on you... and since you should be using dynamic fonts as those are obviously content areas, that means you can never predict the content size.

    It really falls into the category of more of the "but I can do it in Photoshop" nonsense, that just pisses all over websites that try to do it.

    IN THEORY you could use a method called 'faux columns' to handle it... you have an outer div wrapping every three elements to fake the appearance of the columns stretching with a background image. Another approach would be to absolute position three div inside each wrapping div underneath your content, bottom:0; height:999em; with the outer div set to overflow:hidden. A final approach, and one I would advise against is abusing tables for it -- which would REALLY throw accessibility and any chance of responsive layout out the window.

    It can be done -- If I was REALLY going to do it, I'd probably use the aPo background div approach... 

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<style type="text/css">

html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dd,dt,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	background:#CCC;
}

p {
	padding:0 1em 1em;
}

.columnWrapper {
	position:relative; /* to absolute position our faux-div */
	overflow:hidden; /* wrap floats, chop off faux-div */
	/*
		crappy fixed width idiocy, also trips haslayout to wrap floats
		and fix legacy IE absolute positioning bugs
	*/
	width:976px; 
	margin:1em auto 0;
}

.fauxColumn1,
.fauxColumn2,
.fauxColumn3 {
	position:absolute;
	bottom:0;
	left:0;
	height:999em;
	background:#FFF;
	border-bottom:2px solid #666;
}

.fauxColumn2 {
	left:328px;
}

.fauxColumn3 {
	left:656px;
}

.fauxColumn1,
.fauxColumn2,
.fauxColumn3,
.subSection {
	width:316px;
}

.columnWrapper .subSection {
	position:relative;
	float:left;
	display:inline; /* prevent IE margin bugs */
	margin-right:14px;
	padding-top:1em;
}

.columnWrapper .last {
	margin:0;
}

.columnWrapper .fauxColumns div {
	height:999em;
	background:#FFF;
}

</style>

</head><body>

<div class="columnWrapper">
	<div class="fauxColumn1"></div>
	<div class="fauxColumn2"></div>
	<div class="fauxColumn3"></div>

	<div class="subSection">
		<p>Some content here</p>
		<p>Some content here</p>
		<p>Some content here</p>
		<p>Some content here</p>
	</div>

	<div class="subSection">
		<p>Some content here</p>
		<p>Some content here</p>
	</div>

	<div class="subSection last">
		<p>Some content here</p>
		<p>Some content here</p>
		<p>Some content here</p>
		<p>Some content here</p>
		<p>Some content here</p>
		<p>Some content here</p>
		<p>Some content here</p>
		<p>Some content here</p>
	</div>
<!-- .columnWrapper --></div>

</body></html>
    Code (markup):
    Though again, my real advice would be don't do it, and find some other way to create the layout that doesn't throw accessibility, responsiveness and in general usability aside like a used hanky... since this involves a LOT of things that to be honest, have no place on a website in the first place -- the very concept reeks of "for print" thinking.

    Oh, and jQuery is NEVER the answer. Throwing scripting at a LAYOUT problem? that's just stupid. Anyone who tells you otherwise is packing you so full of sand you could change your name to Sahara.
     
    deathshadow, Aug 20, 2012 IP