Member Avatar for 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;
}
Edited by matthewl because: n/a
  • 3 Contributors
  • 2 Replies
  • 187 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by xylude

Dani AI

Generated

Quick diagnosis (from the CSS shown by ): the left column is absolutely positioned and several properties use percentage heights or missing units. An absolutely positioned child is removed from normal flow, so its parent (#content) will not expand to contain it. Percent heights like height:100% or min-height:98% only work when the parent has a definite height. Also values such as width:868 or border-width:1 need explicit units (for example px) or they may be ignored, and width:100% plus padding will cause overflow unless box-sizing is changed.

Two practical fixes — pick one.

  • Modern, simple and reliable: make the content a flex container so columns sit side-by-side and the parent naturally grows.
#content {
  display: flex;
  gap: 12px;
  box-sizing: border-box;
  padding: 12px;
}

#content > .column {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #000;
  background: #fff;
  padding: 8px;
}
  • Classic float approach: stop using position:absolute on columns, float them, and ensure the parent clears floats. A lightweight clearfix will force the parent to contain floated children:
#content::after {
  content: "";
  display: table;
  clear: both;
}

Extra notes and cautions: replace long runs of <br/> with margins; use explicit units (px, em, mm) for widths and borders; remove height:100% unless a fixed-height parent exists; box-sizing: border-box avoids width+padding overflow. As pointed out, containing floats or creating a block formatting context fixes the collapsing container; and as suggested, inspect computed styles with browser devtools to confirm which rules are being applied.

Recommended Answers

All 2 Replies

Member Avatar for 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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.