common div growth issue I could use help with?

[matthewl]

Hi! I am trying to develop two columns that are side by side with in the "content" div. As of now the the columns is not forcing the "content" div grow with the columns.

I am completely stumped and I could use your help?

Here is the html for the body of the page:

<div id="container">
		<div id="header"><img src="images/vbgheader.png" height="186"></div>
		<div id="user_options">
		<a href="login.php">Sign in</a> | Not a Member yet? <a href="signup.php">Sign up</a>
		</div>
		<div id="menu">
    	<a href="#">link 1</a> <a href="#">link 2</a>
		</div>
		<div id="content">
			 <div id="col1">
   		 	blah
   		 	</div>
   		 	<div id="col2">
   		 	<br /><br /> <br /> <br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
   		 	second colomn for something not sure yet?
   		 	</div>
		</div>
		<div id="footer"><span style="font-size:8pt">&copy;2010 VBallGames.com</span></div>
	</div>

here is the corresponding css:

body {
margin-left: 3em;
margin-right: 3em;
font-family:Sans-serif;
}
#container {
margin-left: auto ;
margin-right: auto ;
width:868;
}
#header {
text-align:center;
}
#user_options {
text-align:right;
font-size:9pt;
margin-bottom:2.5em;
}
#menu {
width:100%;
border-bottom-color:orange;
border-bottom-width:3px;
border-bottom-style:solid;
padding-right:6mm;
}
#content {
margin-bottom:2.5em;
height:100%;
background:rgb(240,240,255);
width:100%;
font-size:10pt;
padding:3mm;
position:relative;
}
#col1 {
border-style:solid;
border-width:1;
border-color:black;
padding:1.5mm;
width:420px;
min-height:98%;
background:white;
position:absolute;
}
#col2 {
border-style:solid;
border-width:1;
border-color:black;
padding:1.5mm;
width:420px;
position:relative;
right:0;
top:0;
float:right;
background:white;
height:98%;
}
#footer {
text-align:center;
}

[harrierdh]

If it was me I'd just download a template like one of these. I would suggest though, if you haven't already, get Firefox and Firebug. That way you can tweak the CSS on the fly and debug it yourself.

http://www.bluerobot.com/web/layouts/layout1.html

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

[xylude]

Here's a quick way to make 2+ column layouts:

CSS:

.outer {
width:800px;
margin:auto;
text-align:center;
}
.floatWrap {
width:100%;
overflow:auto;
}
.col1 {
float:left;
width:50%;
}
.col2 {
float:right;
width:50%;
}

And the markup:

<div class='outer'>
<div class='floatWrap'>
<div class='col1'>Column 1 content</div>
<div class='col2'>Column 2 content</div>
</div>
</div>

You can mess around with that to change the column widths or add padding and what not. You can add as many colums as you want to it and the outer div will always stretch to fit the longest column.