1 reply [Last post]
geod
Offline
newbie
Last seen: 16 years 5 days ago
Joined: 2004-05-28
Posts: 1
Points: 0

Folks,

I'm completely stuck. The following page:
http://www.milnorpictures.com/newsite/test.htm
contains two divs, meant to live side-by-side. Both float correctly, are set to absolute, etc. However, no matter what I do the RIGHT box behaves as if the height is set to 100%, NOT the specified pixel height. (Moreover, if I add the proper doctype at the header, this happens in all browsers).
Here is the css:
http://www.milnorpictures.com/newsite/milnor2.css
It's pretty elementary and I cannot, for the life of me, figure out why the div on the right is behaving like this.
Please help!!!

Also, here is the specific CSS code. I find that this exhibits the above behavior even with the div calling it is the ONLY item on a page. Help?!
#right {
position : absolute;
height : 516px;
width : 200px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
line-height : 16px;
background-color : #fffaec;
background-image : url(images/logonew.jpg);
background-repeat : no-repeat;
background-position : 5px 20px;
left : 665px;
top : 15px;
text-align : justify;
padding : 100px 15px;
border-style : solid;
border-left-width : 10px;
border-left-color : #cabe8e;
border-top-width : 10px;
border-top-color : #cabe8e;
border-right-width : 10px;
border-right-color : #cabe8e;
border-bottom-width : 10px;
border-bottom-color : #cabe8e;
float : left;
display : inline;

}

PS, I have tried all sorts of different item orders, I've run it through the W3C validator (everything hunky-dory), etc.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 28 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

<div> height attribute problem, netscape/mozilla, HELP

Your problem is this in your #right
padding : 100px 15px;

Which is adding 100px to the top and 100px to the bottom in NN and Moz.

But as you do not have a correct DocType in you html, IE6 is rendering in quirks mode, with a broken box model, and the padding instead of being added, is reducing room for content.

Regards
Day

The only way to learn is to do it yourself