Jump to content

3 column layout + top menu bar (ul) - height 100% problem


lotte
 Share

Recommended Posts

Hello from the Netherlands! I hope you can help me out.Forgive me if this is a bit of a stupid question.. I'm kinda new to css. But I'm very motivated to learn and hope to be able to contribute to this forum with answers as well in a while!So, my problem is this:I have a site that consist of a container div, in which at the top sits a menu bar (an inline list), and below that a main content div plus 2 floating divs on the left and right of that.What I want is for the whole thing to be 100% in height (of the viewport) so that there will never be a scrollbar. So I made the container div's height 100%, as well as that of the body and html (otherwise it doesn't work).But a scrollbar keeps showing up, because if I make the column divs 100% in height as well, they reach further than the end of the viewport below, because they sit below the menu bar that has a certain height.Also, the menu bar doesn't show fully, the top padding part is cut off a bit and I don't know why..Is there a way to solve this, or to make the columns reach to the end of the viewport, so make their height 100% minus the height of the menu bar?What I want is this, but here is what I get now: my test site (btw, I use firefox)And here is the code as it is now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML><HEAD>	  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />	<TITLE>Lotte's test page</TITLE>	<STYLE TYPE="text/css">		html, body {margin: 0px; height: 100%;}	body 	{background-color: black;				font-family: arial;				font-size: 11px;				color: gray;				}						#everything {border-left: 1px solid white;			border-right: 1px solid white;			width: 760px;			margin-left: auto;			margin-right: auto;			height: 100%;}		li  {color: #A9A9A9;			margin: 0px;			padding: 7px;			border-right: 1px solid hotpink;			display: inline;			list-style: none;			}				ul {margin: 0px;		display: inline;		}			#main 	{border-top: 1px solid white;			border-bottom: 1px solid white;			margin-top: 7px;			color: black;			background-color: pink;			}			#left {width: 220px;			float: left;			border: 1px solid white;			border-left: 0px;			margin-right: 20px;			padding-left: 20px;			margin-top: 7px;			background-color: black;			height: 100%;}	#right {width: 150px;			float: right;			border: 1px solid white;			border-right: 0px;			margin-left: 20px;			padding-left: 20px;			margin-top: 7px;			background-color: black;			height: 100%;}									</STYLE></HEAD><BODY><div id="everything"><ul class="menu"><li>Home</li><li>Werkwijze</li> <li>Rechtsgebieden</li> <li>Mediation</li> <li>Advocaten</li> <li>Werk & Stage</li> <li>Links</li> <li>Contact</li> <li>Disclaimer</li></ul><div id="left"><p>left block</p><p>left block</p><p>left block</p><p>left block</p><p>left block</p></div><div id="right"><p>right block</p><p>right block</p><p>right block</p><p>right block</p><p>right block</p></div><div id="main"><p>main content block</p><p>main content block</p><p>main content block</p><p>main content block</p><p>main content block</p><p>main content block</p><p>main content block</p><p>main content block</p></div></div></BODY></HTML>

(sorry for the lengthy post..)Thank you for reading!!!*Lotte*

Link to comment
Share on other sites

Ok, maybe it really was too lengthly :). One of the problems in short:Why does this get a scrollbar (in firefox & IE)? (see here):

<HTML><HEAD>	  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />	<TITLE>Lotte's test 4</TITLE>	<STYLE TYPE="text/css">html, body {height: 100%;margin: 0px;}#main {width: 800px;border: 1px solid hotpink;height: 100%;margin: 0px;}		</STYLE><BODY><div id="main">MAIN</div></BODY></HTML>

Link to comment
Share on other sites

Why does this get a scrollbar (in firefox & IE)? (see here):
Because 100% + 2 px (one for each border) > 100%.
Link to comment
Share on other sites

I'm not that good at this, but you should try using a px value instead. Also, if it's a webpage, why don't you create an external stylesheet?

Link to comment
Share on other sites

Because 100% + 2 px (one for each border) > 100%.
Oops, I see Synook :) Thanks!I was trying to make the problem simpler, but I made it a bit too simple.Could you maybe also take a look at the 2 links in my first post? All I want is a 3 column layout with a horizontal list as a menu, and the height set to 100% of the viewport. Is that possible?I'm able to do a 100% height 3 column layout now, but when I want to embed a <ul> in the container div, the menu bar, it gets all scrolly..
Link to comment
Share on other sites

I'm not that good at this, but you should try using a px value instead. Also, if it's a webpage, why don't you create an external stylesheet?
Hi 23.12, thanks for replying! I know I can use a px value, but I want (or at least, my 'customer' wants) the page to reach down to the end of the viewport. And since every user's viewport has a different height in px, I have to use %. And the internal stylesheet is only because it's a test page, I thought it would be easier to post it here like that. But it's a bit long now :)
Link to comment
Share on other sites

Guest FirefoxRocks

Try making both the content blocks and the menu bar a % height, so the menu bar could be like 7% height and the content could be 92% height (I don't know how that will look, try changing the values :))Also, you need lowercase tags in XHTML, so change <HTML> to <html> and so on.

Link to comment
Share on other sites

Try making both the content blocks and the menu bar a % height, so the menu bar could be like 7% height and the content could be 92% height (I don't know how that will look, try changing the values :))Also, you need lowercase tags in XHTML, so change <HTML> to <html> and so on.
Hi FfR, thanks for dropping by! I don't think I'd be too happy with this solution, as it would make the menu bar height variable, where I want it to be fixed in height (so that the border-right's fit nicely in their box). You know what I mean?I'm starting to think this problem is quite hard to solve, it seems a lot of people have 100% height problems with css.. after a whole day now I did find workaround solutions like using negative margins and repeating background-images, but none of them has helped me so far! And I'd just like to do it the right, clean way.There's got to be a good way to achieve what they did, right? www.meulenkampadvocaten.nl/Hoping for some more help :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...