Forum Moderators: open
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
</head>
<body style="margin:0;">
<div style="position:relative;height:100%;width:35%;float:left;background-color:blue;">
<div style="position:relative;background-color:white;width:100%;height:100%;border:1px solid #7290E0;margin-right:4px">Box 1</div>
</div>
</body>
</html>
The first problem is the border on the second div is causing Firefox to display a vertical scrollbar. How can I fix that?
The second problem is that the margin-right is ignored, I want the div to be 100% wide minus 4px.
Any thoughts or suggestions are more than welcome.
Thanks!
Supes.
The first problem with your example is that you are using a doctype which triggers quirks mode in Firefox (and other modern browsers). This means that CSS is handled differently from the published standards.
Try a HTML 4.01 Strict or full HTML 4.01 Transitional doctype. See:
Many thanks!
Supes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head></head>
<body style="height:100%;width:100%;margin:0;">
<div style="height:100%;width:50%;border:1px solid black">
Box 1
</div>
</body>
</html>
I want a div with a border that takes up 100% of the height of the page, without resulting in scrollbars. I have tried placing another div within the first, but I cannot get this to work.
Any ideas on this? All suggestions are welcome! :-)
Thanks
Supes
but you should account for margins and padding so add:
*{margin:0;padding:0}
and then modify each element as needed.
New pages should never be made with the transitional doctype. What are you transitioning from? Always use the strict doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
But if your body and div are 100%, the border will take up additional space of 1px. This is why you are getting a scrollbar.
Unfortunately your suggestions don't help, but thanks for taking a look.
I would like to be able to display a div at 100% height within its parent (paernt being body or another div etc), with a border of 1 or more, and not have scroll bars appear. Is this not in fact possible, even using nested DIVs to get the same result?
Many thanks
Supes
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style type="text/css">
html,body{height:100%;min-height:100%}
</style>
</head>
<body style="margin:0;">
<div style="min-height:100%;width:35%;float:left;background-color:blue;">
<div style="background-color:white;width:100%;border:1px solid #7290E0;margin-right:4px">Box 1</div>
</div>
</body>
</html>
I'm a bit rushed so let me know. One of the problems you are going to have is you can't have more than one nested element like this with 100% height.
Unfortunately that doesn't work either, I get a blue div that is the full height of the page, with a small white div with a blue border at the top containing the Box 1 text, that is wider than the blue div by 2px.
Im beginning to think that Safari just can't do this, which suprises me as I have been able to do this with Firefox and Opera by switching the box model for DIVs in this situation. No such option exists for Safari, so thought I would go back to square one and look at the problem differently.
If you have any other suggestions or ideas, please let me know though!
Many thanks
Supes
