Forum Moderators: not2easy
I created a multicolumn layout with header that loos like this:
+------------------+
¦ Header
+------+-----------+
¦ Menu ¦ Body
¦
¦
+------+-----------+
The header is a div (nothing special)
The menu is a div with Float left and width 25%
The body is a div with Float right and width 74%
Problem is that the menu must have a height of 100% because it is colored blue.
The header has a fixed height of 140px.
I think the problem gets clear ... I get a vertical scrollbarbecause of the 100% + 140 px ...
Is there a way to solve this?
Thanks a lot
Yoeri
Why I ask:
I am rewriting the HTML of a web application at work, and I want it completely in XHTML and CSS. With this approach I am able to place the menu at the bottom and at the left side, which are layouts the page must support. To do this I now only have to change the css instead of modifying the table html...
You raise an interesting issue that many have wrestled with. Personaly i prefer absolutely postioned sections so have only theoretical knowledge to share...
Have you thought about this:
Place the menu and body at the top of the page, then absolutely position the header?
If you gave the menu and body the right padding-top and z-index to suit, seems to me that it might do the trick, in theory at least ;)
Nick
I got it to work in Mozilla, but IE6 is rendering it wrong :-(
Made an empty page with a header absolutely positioned and a height of 100px
A menu float left width 25%
A body float right width 74%
When I give the body a height of 100% and a margin-top of 100px, then:
In IE : I get a vertical scrollbar for the 100px
In MOZ: The height 100% is not working :-(
So, the problem isn't solved yet ... but I won't give up
Try this :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>My solution</title>
<style type="text/css">
<!--
Body
{
margin: 0;
height: 100%;
}
DIV.container {
position: absolute;
height: 100%;
width: 100%;
}
DIV.Header {
height: 100px;
width: 100%;
}
DIV.Menu {
height: 100%;
max-height:100%;/* Only for Mozilla ... */
width: 25%;
background-color: #aaaaaa;
float: left;
}
DIV.Body
{
height: 100%;
max-height:100%;/* Only for Mozilla ... */
width: 74%;
background-color: lime;
float: right;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="Header">Header</div>
<div class="Menu">Menu</div>
<div class="Body">Body</div>
</div>
</body>
</html>
Try this. The only way I could get it to work was to nest content divisions within absolutely positioned shell divisions. That way you could actually use the content divisions to place your information/content without creating a vertical scroll bar.
It's not really tested at all for durability, but is identical in Netscape 7, Opera 6.05, IE 6 and Moz 1.1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>CSS Positioning</title>
<style type="text/css">
body {
background: #fff;
color: #000;
margin: 0;
padding: 0;
height: 100%;
font: bold 13px verdana, helvetica, sans-serif;
}#menu{
position: absolute;
background: #eee;
top: 0;
left: 0;
width: 33%;
height: 100%;
border-right: 1px dotted #666;
}#content{
position: absolute;
background: #ccc;
top: 0;
right: 0;
width: 67%;
height: 100%;
}#header {
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100px;
z-index: 5;
}div.header-content
{
border-bottom: 1px dotted #666;
padding: 10px;
height: 80%;
}div.menu-content
{
position: absolute;
top: 100px;
left: 0;
padding: 10px;
}div.content-content
{
position: absolute;
top: 100px;
left: 0;
padding: 10px;
}</style>
</head>
<body><div id="header">
<div class="header-content">Header</div>
</div><div id="menu">
<div class="menu-content">Menu</div>
</div><div id="content">
<div class="content-content">Body</div>
</div></body>
</html>
Hope that helps!
The layout is now working great in Mozilla 1.0+ and IE5.0+
Did not test it in other browsers.
I used the content-divs but without absolute positioning.
If somebody is interested in the code, let me know, i'll post it like I did it.
I now have a 2-column layout with a header and a menu-and body section of 100% height :)
Thanks a lot for the help everyone!
