homepage Welcome to WebmasterWorld Guest from 54.211.230.186
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Multicolumn Height question
Yoeri

10+ Year Member



 
Msg#: 486 posted 6:37 pm on Jan 4, 2003 (gmt 0)

Hello,

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...

 

Nick_W

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 486 posted 6:46 pm on Jan 4, 2003 (gmt 0)

Hi Yoeri, welcome to WebmasterWorld!

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

Yoeri

10+ Year Member



 
Msg#: 486 posted 7:15 pm on Jan 4, 2003 (gmt 0)

Just tried it ...

I got it to work in Mozilla, but IE6 is rendering it wrong :-(

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 486 posted 9:04 pm on Jan 4, 2003 (gmt 0)

Did you get this working Yoeri? If not, drop some code off. How did you fix it if you got it working?

WibbleWobble

10+ Year Member



 
Msg#: 486 posted 1:13 am on Jan 5, 2003 (gmt 0)

I'm intrigued too, as Mozilla 1.2 doesn't seem to render height percentages?

Yoeri

10+ Year Member



 
Msg#: 486 posted 10:57 am on Jan 5, 2003 (gmt 0)

Nope, not working

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

Yoeri

10+ Year Member



 
Msg#: 486 posted 1:05 pm on Jan 5, 2003 (gmt 0)

Found something ... the height in Mozilla is solved, now I only have the vertical scrollbar left ..

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>

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 486 posted 2:20 am on Jan 6, 2003 (gmt 0)

Yoeri-

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!

Yoeri

10+ Year Member



 
Msg#: 486 posted 9:33 am on Jan 7, 2003 (gmt 0)

Thanks

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved