homepage Welcome to WebmasterWorld Guest from 23.22.29.137
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Unable to get child divs to stretch to height of parent div
RyanFromNBI




msg:3381412
 6:19 pm on Jun 28, 2007 (gmt 0)

I've done a lot of searching online and in other forums and haven't found a solution to my problem.

I've got a layout in which I have two child divs (as columns) nested inside of a parent div. I'd like them both to be the height as the column with the most content in it. A snap for me to do in tables, but I'd like to be able to do it in CSS.

Here is my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css" media="screen">

body {
background-color:#9999CC;
height:100%;
margin:0px;
}

#container {
background-color:#FFFFFF;
height:auto;
width:500px;
margin-left:auto;
margin-right:auto;
}

#2ndaryContainer {
width:500px;
border:#000000 10px solid;
height:auto;
}

#column1{
background-color:#CCCCCC;
float:left;
width:250px;
height:100%;
}

#column2{
background-color:#999999;
float:left;
width:250px;
height:100%;
}

#extraRow {
width:500px;
background-color:#99CC33;
}
</style>
</head>

<body>

<div id="container">

<div id="2ndaryContainer">

<div id="column1">
Content in Column 1
</div>

<div id="column2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</div>

<div id="extraRow">
This is another row/div
</div>

</div>

</body>
</html>

Any help is greatly appreciated.

-- Ryan

 

coyoteRick




msg:3381605
 11:18 pm on Jun 28, 2007 (gmt 0)

Howdy Ryan,

First off, I'd recommend ditching any reference to height:100% or height:auto. They don't work. Defining a height property works with specific pixel dimensions, but I've never got them working correctly with percentages. Simply delete any reference to height in your example, it's not needed really.

Secondly, if you have two floating elements within a container, define the property "overflow:auto" within the container element to keep your container working correctly.

And lastly, instead of getting them to work automatically with height definitions, think about using the "Faux Column" approach. This essentially involves making the background image/color of the container "fake" the color of the columns. Do a google on "Faux Columns" and you should find some awesome workarounds.

Hope that helps!

coyoteRick




msg:3381606
 11:19 pm on Jun 28, 2007 (gmt 0)

Oh, I almost forgot....

Welcome to the wonderful WebmasterWorld!

Xapti




msg:3381854
 7:25 am on Jun 29, 2007 (gmt 0)

Strange that you couldn't find anything by searching. There's probably several thousand people who have talked about this online.

It's one of the reasons people prefer tables.
Divs cannot do that unless you style them as tables. This is support by most major browsers, but not IE. Many people do faux columns because of this. It's not too complicated of a concept that's easy to find in a google search. Search this site, might not want to bother with the internet, since there's hordes of info on stuff like that here.

I personally prefer a slightly advanced approach, which styles divs as a table for most browsers, but for IE, it uses a work-around.

[edited by: Xapti at 7:35 am (utc) on June 29, 2007]

RyanFromNBI




msg:3381875
 7:46 am on Jun 29, 2007 (gmt 0)

Thanks for the tips. It was the "faux columns" keywords that I was unaware of, thus I wasn't coming up with that simple approach in my searches.

That seems to have gotten me pointed in the right direction.

Thank you very much for your help.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved