Forum Moderators: not2easy
Here's just my most recent test page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>An example layout</title>
<style type="text/css">
*{padding:0;margin:0}
html{height:100%}
body{width:100%;height:100%;color:white;z-index:1;position:relative}
#jobe{position:absolute;left:0;bottom:0;background-color:green;height:50px;width:50px}
#klak{margin:50px;padding:50px;background-color:red;height:100%;position:relative;overflow:hidden}
</style>
</head>
<body>
<div id="klak"> ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt ttt
<div id="jobe">
</div>
</div>
</body>
</html>
Firstly, WHY does html need to have height:100%, and not body? it won't work otherwise.
Secondly, why isn't there a bottom margin on the red div (#klak)? (is this a rendering bug in IE/Firefox?)
Lastly, why does the box model position objects to it's margin inner border, yet the actual element's size is respect to the padding inner border?
It doesn't seem logical to me in general the way things are done when it comes to that part of the box model. Maybe I just dont' fully comprehend the intentions for the attributes margin and padding... :\
For instance, how would a person get a box (including margin and/or padding) which stretches to 100% window height/width, without exceeding it, while still having margin/padding?
(well I do know an answer, but it's a little hackish... position it absolutely with left,right,top, and bottom (all 4). For IE, use different case (since it doesn't support right/bottom), just use padding, since it interprets it in an element's size.)
[edited by: Xapti at 11:41 pm (utc) on May 10, 2007]
WHY does html need to have height:100%, and not body? it won't work otherwise.
because it's the inheritance chain. HTML in compliant browsers (with standards rendering Doctypes) correctly place HTML as the root element, BODY cannot inherit the 100% height if it's not set on the root.
why isn't there a bottom margin on the red div (#klak)? (is this a rendering bug in IE/Firefox?)
no it's not a bug, it's because there's nothing after it [the red div].
margin3 anyone?
re:3 - Xapti it might help if you can provide a clearer example with borders/padding to help illustrate?
Suzy
why does the box model position objects to it's margin inner border, yet the actual element's size is respect to the padding inner border?
width: 100%; padding: 2px;stretches to 100% window height/width
There is no tag name "window" in CSS. You'd have to use the root HTML as the grandparent. If you want an element to be 100% of it's parent width while still having padding, stick to using percents as padding, f.ex
width: 98%; padding: 1%;
