I have a another question, about my page which is in construction. How is it known that the width of the page is 1160px ? If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?
If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?
I didn’t know that margin could effect the BG image.
If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?
The question is a bit hard to understand. My intitial response is:
if the header is set to width: 100% (or even if that isn’t specified) it will be 100% width, as that’s the normal behavior of a div. So the header will be the full width of the window, even if it doesn’t appear so.
so “how can you fix this” doesn’t really mean anything to me. Do you want a set width to it, or want it to exapnd the full viewport width? If the latter, you can give it a background color or bg image to show that it visually spans the whole width.
I want the #header to expand to the full width of the page, because it’s no longer within #wrapper. Width{100%} doesn’t have any value because it’s no longer the child or #wrapper. How can I resolve this ?
I’m too busy to get involved right now, but here’s a stripped down version of your page that demonstrates the problem and may help someone suggest a fix.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Debugging Creative Sheep Header Width</title>
<style type="text/css">
html, body {
height: 100%; /* reference for #wrapper min-height:100% */
}
body {
margin: 0;
padding: 0;
}
/*=== Beginning of Layout Structure ===*/
#wrapper { /* do not set overflow:hidden; here, Opera will not comply */
width: 1160px;
min-height: 100%;
overflow: hidden;
margin: 0 auto;
background: #000000; /*BG color for #content*/
position: relative;
color: #fff;
}
#header {
min-height: 120px; /* 152px total w/ padding */
padding: 2px 0 12px; /* preserve space for #nav and uncollapse child margins */
background: #AAA;
width: 100%;
}
</style>
</head>
<body>
<div id="header"><h2>#header</h2></div>
<div id="wrapper"><h2>#wrapper</h2>When the viewport is narrower than #wrapper, the width of #header does not expand when scrolling to the right.</div>
</body>
</html>
When you narrow the viewport, it narrows the div set to width: 100%. But as you see, if you drag the scroll bar to the right, the div doesn’t resize again. So setting that min-width prevents the div from growing smaller than the wrapper, which means the problem goes away. When you scroll right, you’ll only ever be able to scroll are far right as the widest element goes.