[thelist] [Simple layout] I want to reach the standards

David Bindel dbindel at austin.rr.com
Sat Apr 27 13:55:01 CDT 2002


> the problem that occurs are
> -i can't success to put the menu on the left side and
> the content directly on his right side -i'm having
> problem with the 'width:100%;' in mozilla
> http://194.250.105.2/evolt/mozilla.gif
> http://194.250.105.2/evolt/ie6.gif

Check out Glish.com's CSS section:
http://www.glish.com/css/

What you are doing sounds similar to the ALA-style layout they have
posted in the CSS Section.

But the way I would do it would be something like this:

#header {
	margin: 10px; /* this sets all of the margins = 10px, so it
stretches all the way across with 10px around it */
	background: #F00; /* sets it red just so you can see it */
	color: #000;
	height: 200px; /* the height of the DIV */
}
#sidebar {
	position: absolute;
	top: 210px; /* set this value to the height of the header DIV +
the margin of the header DIV (200+10px) */
	left: 0px;
	width: 250px;
	min-width: 250px; /* makes sure that the DIV isn't fluid */
	background: #00F; /* just so you can see where it is */
	color: #FFF;
}
#content {
	margin: 10px 10px 10px 220px; /* set the last value (for the
left margin) to the width of the sidebar plus however much space you
want between the page content and the sidebar */
	background: #FFF;
	color: #000;
}

And here's the HTML code you would use:
<html>
<head>
...
</head>
<body>
<div id="header">this is the header</div>
<div id="sidebar">this is the sidebar</div>
<div id="content">this is the page's content</div>
</body>
</html>




More information about the thelist mailing list