Forum Moderators: not2easy
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>
<style type="text/css">
#header
{
background: #282828;
color: #7b8993;
}
.page2
{
margin: 0 auto;
width: 960px;
}
</style>
</head>
<body>
<div id="header">
<div class="page2">
Some content here
</div>
</div>
</body>
</html>
Now, resize your browser until you can see a horizontal scrollbar. Then, scroll to the right and you can see that the background color (#282828) did not fill the whole browser.
Any ideas?
The reason why it isn't going full browser size is because you gave it a width of 960 pixels. So depending on your viewport size, it won't go the full length.
I changed your width to 100% and it does what you want it to do.
The situation here is I have a 100% div (#header) which will contain the inner 960px div (.page2). Everything is fine when I have my browser maximized. Now, when I resize my browser until I can see a horizontal scrollbar, the 100% div (#header) did not go full length anymore in the browser. You can see this when you scroll your horizontal scrollbar to the right. You can see there that the background color of the #header which is 100% width did not go in full length.
I hope I'm clear to state my problem ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>
<style type="text/css">
* {margin: 0px;
padding: 0px;
border: 0px;
}
#header
{
background: #282828;
color: #7b8993;
}
.page2
{
margin: 0 auto;
width: 100%;
}
</style>
</head>
<body>
<div id="header">
<div class="page2">
Some content here
</div>
</div>
</body>
</html>
Try this. As you might be aware of, browsers have different defaults for margins and paddings. It could be that there is something interfering browser wide that is a default.
You will see the addition to your code at the top of the css, take the file as I have pasted it in for you and give it a go. I have the header going tight to the side with no scroll bar at all when I size the window.
Don't change anything, just copy and paste this into a test.html file and load it up. I have checked in firefox, IE6, and there is no scroll bar.
Let me know how it works for you.
I did a global removal of the padding, margins and borders. Now what you do, is when you want a border/margin/padding, you add what width/height you wish for into the element that you want to style. No need to use the zero anymore because it is already zeroed out for you.
I hope that makes sense for you.
I'll check back in a bit and see how you are doing.
4~css
