Your problem is very common, despite this, only few designers knows how to solve it.
The problem is that your topbar doesn't fill the entire canvas, it would seam that elements which are children of body, calculates their width from the browsers viewpoint, rather then the parent element. That's very impractical. You can however solve this by applying the same min-width to the header, as to your content.
There are also methods to apply a min-width in IE6, i would simply leave it out and ask my users to upgrade their browser. While users stuck on Win9x can shift to Opera.
You don't need to define the min-width for each element separately, instead you could take use of classes, for styles that are shared between elements. I.e.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Min-width Example</title>
<style type="text/css">
* { margin: 0;padding: 0; }
.c1 { /* min-width of page */
min-width: 700px;
}
#header {
background: silver;
width:100%;
height: 150px;
}
#content {
width: 75%;
}
/* Text and Links */
p {margin: 0 0 1em;}
</style>
</head>
<body>
<div id="header" class="c1">
<p>100% wide header, min-width is 700px.</p>
</div>
<div id="content" class="c1">
<p>75% wide content division, min-width is 700px.</p>
</div>
</body>
</html>
Another solution would be to apply the background on the body rather then in a seperate division.
Last edited by LBD; 01-11-2009 at 07:36 AM..
|
