2 replies [Last post]
RyanFromNBI
Offline
newbie
Silver Spring, MD USA
Last seen: 13 years 2 weeks ago
Silver Spring, MD USA
Joined: 2007-06-28
Posts: 2
Points: 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.

Untitled Document

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;
}

Content in Column 1

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.

This is another row/div

Any help is greatly appreciated.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Since IE has such poor

Since IE has such poor support for css2.1, we have to use a work-around called faux columns (Google is your friend), After reading the article at A List Apart, see the 2 column—apparent equal height demo.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

RyanFromNBI
Offline
newbie
Silver Spring, MD USA
Last seen: 13 years 2 weeks ago
Silver Spring, MD USA
Joined: 2007-06-28
Posts: 2
Points: 0

It was the "faux columns"

It was the "faux columns" key words that I was missing. I was doing searches on "css div parent child stretch" etc., etc.

I guess I just figured that there was some way to do it without using a background image, but applying one to the parent div seems to be quite a simple solution.

Thanks!