Just like bro mystic says....
mixed absolute + % + px = screw/mess up.
you either stick with a fixed width in px/em or go everthing %... but the problem that you have in %, when you resize the screen the floating div will go messy also.
If you really wanted to go 100% of screen size, use the traditional html table coding and that will work better than CSS
the below is how i do it in %.. i would suggest you use a fixed width for all the div instead... ....
HTML code:
Quote:
<html>
<head>
<title>Test Page</title>
<LINK href="styles.css" type=text/css rel=stylesheet>
</head>
<body>
<div class="container">
<div class="header">
This is the header
</div>
<div class="LeftSidebar">
this is the leftsidebar
</div>
<div class="content">
This is the content
</div>
<div id="cleardiv"></div>
<div class="footer">
This is the footoer
</div>
<div>
</body>
</html>
|
Styles.css
Quote:
BODY
{
font-family: Verdana, Arial, Sans-Serif;
font-size: 9pt;
background: #FFFFFF;
}
div.container
{
width: 100%;
background: #FFFFFF ;
}
div.header
{
background-color: #FFFF99;
clear: left;
Height: 150px;
}
div.LeftSidebar
{
float: left;
width: 20%;
height: 200px;
background-color: #FFCC99 ;
}
div.Content
{
float: left;
width: 80%;
background-color: #00FFFF;
}
#cleardiv
{
clear: both;
}
div.footer
{
background-color: #99FF99;
width: 100%;
Height: 50px;
}
|