1. Home
  2. Forums Index
  3. Browser Side / CSS 6:43 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS DIV Height Problems - IE & Firefox

IE won't display the 100% height for the columns

         

Kufu

1:18 am on Oct 18, 2005 (gmt 0)

10+ Year Member



I got some help a few days ago on the board, so I figured it couldn't hurt to ask about this new problem.

The below code is supposed to display a 100% height for the two columns in the body. It works fine in Firefox but not in IE (or Opera) -- the DIVs only stretch as far as the content in IE.

Does anyone have any insight into this problem? Usually it is the other way around and Firefox is the one that is more strict rendering the code.

Any help would be much appreciated.

Thanks in advance.

html,body
{
background-color:#5B584E;
margin-top:0px;
font-family:sans-serif, georgia, times;
font-size:12px;
height:100%;
}

.container
{
width:775px;
background-color:#ffffff;
}

.body_padding
{
padding:3px;
}

.mast_head
{
background-color:#3C382F;
color:#ffffff;
height:50px;
line-height:50px;
}

h2,h3
{
margin:0px;
}

.divider
{
line-height:3px;
background-color:#ffffff;
}

.orange_back
{
background-color:#fe7502;
background-repeat:repeat-x;
height:100px;
}

.main_body
{
height:100%;
}

.left
{
width:500px;
float:left;
margin:0px;
background-color:#E8E8E1;
height:100%;
}

.vertical_divider
{
width:3px;
background-color:#ffffff;
float:left;
height:100%;
line-height:100%;
}

.right
{
width:266px;
float:left;
margin:0px;
height:100%;
background-color:#3C382F;
}

.left_header
{
background-color:#DADBD6;
color:#524F44;
text-align:left;
border-bottom:1px solid silver;
padding:5px;
}

.left_body
{
color:#524F44;
text-align:left;
padding:5px;
}

.right_header
{
background-color:#524F44;
color:#E8E8E1;
text-align:left;
border-bottom:1px solid #777164;
padding:5px;
}

.right_body
{
color:#E8E8E1;
text-align:left;
padding:5px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div class="container">
<div class="body_padding">
<div class="mast_head">
<h2>Liquid Meadow</h2>
</div>
<div class="divider">
&nbsp;
</div>
<div class="orange_back">
test
</div>
<div class="divider">
&nbsp;
</div>
<div class="main_body">
<div class="left">
<div class="left_header">
<h3>left header</h3>
</div>
<div class="left_body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque fringilla, ante a placerat tempus, dolor
mauris pellentesque est, ut lobortis lacus arcu ac neque. Nulla dapibus ante eget eros. Sed nisl. Proin
volutpat libero. Praesent quis dui nec libero fringilla hendrerit. Curabitur porttitor elit vel justo.
Proin mauris nunc, suscipit sed, varius ac, aliquet id, justo. Integer nec mauris. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus venenatis. In sed tortor.
Fusce vitae lacus. Nulla rhoncus, lectus condimentum dictum convallis, sapien turpis vulputate augue, sed
faucibus leo nunc ac quam. Duis urna. Etiam eget eros. Curabitur ultricies luctus erat. Pellentesque quis
lacus. Donec vitae felis. Aliquam nec nibh a metus condimentum varius. Cras eu justo.
</div>
<div class="left_header">
<h3>left header</h3>
</div>
<div class="left_body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque fringilla, ante a placerat tempus, dolor
mauris pellentesque est, ut lobortis lacus arcu ac neque. Nulla dapibus ante eget eros. Sed nisl. Proin
volutpat libero. Praesent quis dui nec libero fringilla hendrerit. Curabitur porttitor elit vel justo.
Proin mauris nunc, suscipit sed, varius ac, aliquet id, justo. Integer nec mauris. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus venenatis. In sed tortor.
Fusce vitae lacus. Nulla rhoncus, lectus condimentum dictum convallis, sapien turpis vulputate augue, sed
faucibus leo nunc ac quam. Duis urna. Etiam eget eros. Curabitur ultricies luctus erat. Pellentesque quis
lacus. Donec vitae felis. Aliquam nec nibh a metus condimentum varius. Cras eu justo.
</div>
<div class="left_header">
<h3>left header</h3>
</div>
<div class="left_body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque fringilla, ante a placerat tempus, dolor
mauris pellentesque est, ut lobortis lacus arcu ac neque. Nulla dapibus ante eget eros. Sed nisl. Proin
volutpat libero. Praesent quis dui nec libero fringilla hendrerit. Curabitur porttitor elit vel justo.
Proin mauris nunc, suscipit sed, varius ac, aliquet id, justo. Integer nec mauris. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus venenatis. In sed tortor.
Fusce vitae lacus. Nulla rhoncus, lectus condimentum dictum convallis, sapien turpis vulputate augue, sed
faucibus leo nunc ac quam. Duis urna. Etiam eget eros. Curabitur ultricies luctus erat. Pellentesque quis
lacus. Donec vitae felis. Aliquam nec nibh a metus condimentum varius. Cras eu justo.
</div>
<div class="left_header">
<h3>left header</h3>
</div>
<div class="left_body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque fringilla, ante a placerat tempus, dolor
mauris pellentesque est, ut lobortis lacus arcu ac neque. Nulla dapibus ante eget eros. Sed nisl. Proin
volutpat libero. Praesent quis dui nec libero fringilla hendrerit. Curabitur porttitor elit vel justo.
Proin mauris nunc, suscipit sed, varius ac, aliquet id, justo. Integer nec mauris. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus venenatis. In sed tortor.
Fusce vitae lacus. Nulla rhoncus, lectus condimentum dictum convallis, sapien turpis vulputate augue, sed
faucibus leo nunc ac quam. Duis urna. Etiam eget eros. Curabitur ultricies luctus erat. Pellentesque quis
lacus. Donec vitae felis. Aliquam nec nibh a metus condimentum varius. Cras eu justo.
</div>
</div>
<div class="vertical_divider">
</div>
<div class="right">
<div class="right_header">
<h3>right header</h3>
</div>
<div class="right_body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque fringilla, ante a placerat tempus, dolor
mauris pellentesque est, ut lobortis lacus arcu ac neque. Nulla dapibus ante eget eros. Sed nisl. Proin
volutpat libero. Praesent quis dui nec libero fringilla hendrerit. Curabitur porttitor elit vel justo.
Proin mauris nunc, suscipit sed, varius ac, aliquet id, justo. Integer nec mauris. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus venenatis. In sed tortor.
Fusce vitae lacus. Nulla rhoncus, lectus condimentum dictum convallis, sapien turpis vulputate augue, sed
faucibus leo nunc ac quam. Duis urna. Etiam eget eros. Curabitur ultricies luctus erat. Pellentesque quis
lacus. Donec vitae felis. Aliquam nec nibh a metus condimentum varius. Cras eu justo.
</div>
<div class="right_header">
<h3>right header</h3>
</div>
<div class="right_body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque fringilla, ante a placerat tempus, dolor
mauris pellentesque est, ut lobortis lacus arcu ac neque. Nulla dapibus ante eget eros. Sed nisl. Proin
volutpat libero. Praesent quis dui nec libero fringilla hendrerit. Curabitur porttitor elit vel justo.
Proin mauris nunc, suscipit sed, varius ac, aliquet id, justo. Integer nec mauris. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus venenatis. In sed tortor.
Fusce vitae lacus. Nulla rhoncus, lectus condimentum dictum convallis, sapien turpis vulputate augue, sed
faucibus leo nunc ac quam. Duis urna. Etiam eget eros. Curabitur ultricies luctus erat. Pellentesque quis
lacus. Donec vitae felis. Aliquam nec nibh a metus condimentum varius. Cras eu justo.
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</center>
</body>
</html>

Lynque

2:25 am on Oct 18, 2005 (gmt 0)

10+ Year Member



Hello Kufu,

you could try...

.container {
position:absolute;
top:0px;
left:0px;
height:100%;
width:775px;
background-color:#ffffff;
}

by using position:absolute on the container you should have more control over the elements within.

Good Luck

Kufu

2:39 am on Oct 18, 2005 (gmt 0)

10+ Year Member



Hello Lynque,

By using the style you provided, Firefox ends up acting up too. The way I have it right now, it works great in Firefox, but is not functioning as it should in IE.

Thanks for the suggestion. I'll see if I can make it work somehow.

Lynque

2:50 am on Oct 18, 2005 (gmt 0)

10+ Year Member



Actually,

you could also try this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

notice at the end it says "strict" instead of "loose".

That does away with a lot of the problems positioning issues cross browser.

Kufu

3:32 am on Oct 18, 2005 (gmt 0)

10+ Year Member



Lynque,

Still nothing. I really hope that CSS3 does away with all this cross borwser issues. That is if every adopts it.

Thanks for the help.

xfinx

7:27 am on Oct 18, 2005 (gmt 0)

10+ Year Member



try this:

html,body {
height: 100%;
}
div.test {
height: 100%;
}
aah.. I found where I got it..

[quirksmode.org...]

Kufu

1:53 pm on Oct 18, 2005 (gmt 0)

10+ Year Member



xfinx,

There is some interesting stuff on that site, but nothing that helped my problem. Certainly a site to bookmark though.

Thanks.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 6:43 am May 2, 2026