Welcome to WebmasterWorld Guest from 54.196.238.210

Forum Moderators: not2easy

Message Too Old, No Replies

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

     

RyanFromNBI

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

5+ Year Member



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

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

5+ Year Member



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

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

5+ Year Member



Oh, I almost forgot....

Welcome to the wonderful WebmasterWorld!

Xapti

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

WebmasterWorld Senior Member 5+ Year Member



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

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

5+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month