[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