Making 2 Columns equal in height

[ciucaandrei]

I have the divs like this:

<div id="content">

   <div id='left_content'></div> // float left
   <div id='right_content'></div> // float right

</div>

I don't know the height of left_content and right_content.
I see that firefox automatically makes the height of the left_content equal to the right_content, but IE doesn't do anything. I want to know if there is a way to make the height of the smaller div equal to the height of the other div. If there isn't, the solution in firefox should do it, but how do I make the same think in IE.

Thanks

[LadynRed]

Have to see more code than that to adequately diagnose your problem.

[Dan Schulz]

What you need to do is create a DIV that contains everything, then put a wrapper inside that. Those two DIVs will hold one side. Then after the container, place another DIV that will ride alongside it. You'll also need a DIV that holds everything together as well.

For example,

<div id="container">
	<div id="div1">
		<div class="wrapper">
			<p>
				Blah blah blah blah blah
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
			</p>
		</div>
	</div>
	<div id="div2">
		<p>Second DIV content</p>
	</div>
</div>

Now, make sure you zero out your margins and padding in your stylesheet. The universal selector is a great way to do this, though there are better and mroe robust methods available.

* {
	margin: 0;
	padding: 0;
}

Next, give your #container DIV a background color. Since the sidebar in this example will be grey, I'm going to go with white for my example.

* {
	margin: 0;
	padding: 0;
}
 
#container {
	background: #FFF;
}

Then float the div1 container (#div1) to the left and give it a width of 100%. Do NOT apply any borders, margins, or padding to it, except for a negative margin on the side that you want the other DIV to ride up against. In this case, that negative margin will be on the right side and be 200px wide. Don't forget to add a background color - this is the color that will appear in the second DIV (your sidebar, for example).

* {
	margin: 0;
	padding: 0;
}
 
#container {
	background: #FFF;
}
 
#div1 {
	background: #99C;
	float: left;
	margin: 0 -200px 0 0;
	width: 100%;
}

Now, your .wrapper DIV inside the #div1 DIV will need to be given a background color. White would be a good color to use here for the purpose of this demonstration. It's also going to need a margin on its right side as well; but a regular right margin instead of a negative one. If this DIV is going to contain other floats, add overflow: hidden; to it to contain them within it. I like to put padding on this DIV to create some white space, but if you don't need it, you can safely remove it.

* {
	margin: 0;
	padding: 0;
}
 
#container {
	background: #FFF;
}
 
#div1 {
	background: #99C;
	float: left;
	margin: 0 -200px 0 0;
	width: 100%;
}
 
#div1 .wrapper {
	background: #FFF;
	margin: 0 200px 0 0;
	overflow: hidden;
	padding: 10px 0 10px 10px;	/* optional, feel free to remove */
}

Now that the left DIV is out of the way, we need to set up the right sidebar DIV as well. Start by giving it the same background color as the #div1 container (#99C), then float it to the left, and then set the width (200px).

* {
	margin: 0;
	padding: 0;
}
 
#container {
	background: #FFF;
}
 
#div1 {
	background: #99C;
	float: left;
	margin: 0 -200px 0 0;
	width: 100%;
}
 
#div1 .wrapper {
	background: #FFF;
	margin: 0 200px 0 0;
	overflow: hidden;
	padding: 10px 0 10px 10px;	/* optional, feel free to remove */
}
 
#div2 {
	background: #99C;
	float: left;
	width: 200px;
}

Don't apply any left/right padding or margins here - instead, apply them to the container's children (such as the paragraph) instead. This will not only keep the layout intact when in Standards Mode, but will also prevent a LOT of Internet Explorer bugs and also avoid the issues with IE 5.x's Box Model as well. Of course, when floating elements, make sure that you clear out the next element inside the #container DIV that you don't want floated. No extra HTML is necessary; just use clear: left; on the element you don't want to float. IE 5/6 may get grouchy and pull the container up a bit; if that happens, just add height: 1%; to the cleared element and it'll be fine (hasLayout issue).

[Ryan Zooloo]

Whoa, nice answer. Just by reading it I was going to say:

Add "height:??px" to each layers attributes.

Same number, same height. Easy, if that's all they want.

If not, read ^

Ryan

[Dan Schulz]

My way of doing it allows the content to expand and contract regardless of the height. It also doesn't use any images either.

[ciucaandrei]

This is the best answer ever

[Dan Schulz]

Glad you found it useful.

[jFive]

What if div2 is taller than div1? This example doesn't seem to account for that.

Thanks

[Rayzur]

This example doesn't seem to account for that.

You're right it doesn't account for that, that example assumes that the main content (left side) will always be greater than the right side. You will need one more wrapping div to fix it.

This Example was built off of that same code.

[Dan Schulz]

What if div2 is taller than div1? This example doesn't seem to account for that.

Thanks

Unless I accidentally omitted something, it would account for it by default simply by using background colors to cover up the non-content areas which create the illusion of equal-height columns.

[Rayzur]

Unless I accidentally omitted something,

Giving the container 100% width and float:left gets it working for me.

#container {
background: #FFF;
float:left;
width:100%;
}

If you pull the float and width out of the #container the right side will be longer

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Two equal columns</title>
<meta name="generator" content="PSPad editor, www.pspad.com"/>
<style type="text/css">
/* ---------- ::Resets:: --------------------- */
body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}
body {
    background: #333;
    padding:20px;
}
#container {
    background: #FFF;
     float:left;
    width:100%;
}
 
#div1 {
    background: #99C;
    float: left;
    margin: 0 -200px 0 0;
    width: 100%;
}
 
#div1 .wrapper {
    background: #FFF;
    margin: 0 200px 0 0;
    overflow: hidden;
}
#div2 {
    background: #99C;
    float: left;
    width: 200px;
}
p {padding:10px;}
</style>
</head>
<body>

<div id="container">
    <div id="div1">
        <div class="wrapper">
            <p>Blah blah blah blah blah</p>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
        </div>
    </div>
    <div id="div2">
        <p>Second DIV content</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>

    </div>
</div>

</body>
</html>

[Dan Schulz]

Odd, since I never have to float the container DIV.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<meta http-equiv="imagetoolbar" content="no">
		<meta name="description" content="A brief description of the current page goes here.">
		<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished">
		<style type="text/css" media="screen">
			
		/* CSS RESET RULES */
			html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
			col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
			ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
			sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
				margin: 0;
				padding: 0;
				vertical-align: baseline;
			}

			body {
				background: #FFF;
				color: #000;
				font: 85&#37;/150% verdana, arial, helvetica, sans-serif;
			}

			fieldset {
				border: 0;											/* we'll be applying a border to a DIV with the class of "fieldset" later on, so this isn't needed */
				display: inline;									/* this squashes an IE float bug */
			}

			h1, h2, h3, h4, h5, h6 {								/* aside from changing the default font types, leave this alone */
				font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
			}

			img {
				border: 0;											/* this squashes a Firefox bug */
				vertical-align: bottom;								/* this squashes an IE bug */
			}

			.skip {
				position: absolute;
				left: -999em;
			}
		
		/* GENERAL LAYOUT RULES */
			#container {
				background: #EEE;
				color: inherit;
				margin: 0 auto;
				min-width: 750px;
				max-width: 1150px;
			}
				#header {
					background: #165498;
					color: #FFF;
					height: 80px;
				}

				#search-form div {
					background: #CCC;
					color: inherit;
					float: right;
					height: 1.75em;
					line-height: 1.75em;
					position: relative;
					z-index: 1;
				}
					#search-form legend span, #search-form label {
						position: absolute;
						left: -999em;
					}

					#search-form input {
						margin: 0;
						vertical-align: top;
					}

				#menu {
					background: #CCC;
					color: inherit;
					float: left;
					height: 1.75em;
					line-height: 1.75em;
					margin: -1.75em 0 0 0;
					width: 100%;
				}
					#menu li {
						display: inline;
						white-space: nowrap;
					}
						#menu li a {
							background: #ECF;
							color: #000;
							float: left;
							height: 1.75em;
							margin: 0 2px 0 0;
							padding: 0 0.5em;
							text-decoration: none;
						}

						#menu li a:hover {
							background: #0E0;
							color: inherit;
						}
				
				#content {
					float: left;
					width: 100%;
				}
					#content .wrapper {
						background: #FFF;
						color: #000;
						margin: 0 220px 0 0;
						overflow: hidden;
						padding: 1em;
					}
						#content .wrapper p {
							margin: 0.5em 0;
						}
				
				#sidebar {
					float: left;
					margin: 0 0 0 -220px;
					width: 220px;
				}
					#sidebar p {
						padding: 0 10px;
					}
			
				#footer {
					background: #FF8;
					clear: left;
					color: #000;
					height: 1%;
				}
					#footer em {
						display: block;
						font-style: normal;
						padding: 0.5em 0 0.5em 1em;
					}

		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<img src="#" width="200" height="80" alt="Web Site TItle" title="">
			</div>
			<form action="#" id="search-form" method="get">
				<div class="fieldset">
					<fieldset>
						<legend><span>Search This Site</span></legend>
						<label for="search">Enter Your Search Term Here</label>
						<input id="search" name="search" size="25" type="text">
						<input class="submit" type="submit" value="Search">
					</fieldset>
				</div>
			</form>
			<ul id="menu">
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
			</ul>
			<div id="content">
				<div class="wrapper">
					<h1>Web Page Title</h1>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
						bibendum, est.
					</p>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
						bibendum, est.
					</p>
				</div>
			</div>
			<div id="sidebar">
				<p>(Sidebar Goes Here)</p>
			</div>
			<div id="footer">
				<em>Copyright &#38;#169; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em>
			</div>
		</div>
	</body>
</html>

[Rayzur]

Odd, since I never have to float the container DIV.

That was my thought exactly also!