Width 100% causes horizontal scroll!


I have set the width of a container div to be 100%, and for some reason any other elements placed within that container with a width of 100% (of that container div, i.e. 100% screen width) exceed the width of the screen and cause a horizontal scrollbar to appear at the bottom of the browser.

Any ideas on why this is happening and how to fix it would be much appreciated.


Ok, first the relevant CSS:

#masthead {
	width: 100%;
	height: 150px;
	color: #fff;
	background-color: #4c88b1;
	background-image: url(logo.jpg);
	background-position: left;
	background-repeat: no-repeat;
	font-family: "Friz Quadrata";
	border-top: 1px solid #369;

#masthead h1,
#masthead h2 {
	margin-left: 120px;;

#masthead h1 {
	margin-top: 10px;
	width: 600px;
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-bottom: 1px solid #fff;

#masthead h2 {
	margin-top: 0;

#masthead .time {
	text-align: left;
	padding-left: 120px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
	background: inherit;

And now the HTML:

<div id="masthead">
	<p class="time">
		<script language="Javascript">

Now with this CSS, for some reason the masthead extends past the edge of the screen and a horizontal scrollbar is provided at the bottom of the browser window. I’m afraid I can’t offer the CSS in context due to my employer, but I don’t think any other markup or CSS around this code should be affecting it.


Try setting margin and padding to zero on #masthead.

No luck there, margin and padding are both set to 0 in the CSS for the body element.

With the code I have submitted, a scroll bar does appear. I have tried putting margin: 0; padding: 0; in the #masthead rule, but that didn’t have any effect. However, I didn’t think this would be the issue, as the rule I have defined for the body element already had margin: 0; and padding: 0;

I think it’s probably just a conflict of rules somewhere, I’ll keep at it until I get rid of that pesky scrollbar.

As I said before, I would post more CSS and markup, but I work for a public sector organisation and don’t think I should post too much material. Besides, the total markup and CSS is quite sizeable.

Many Thanks - will let you know if I crack it!

I found my problem. There was a #topnav div nested beneath the p#masthead causing the problem. It had a width of 100%, but also a padding-left: 120px (to line up with something in the masthead). This padding was obviously adding to the 100% width. Clearly I can’t rectify this by using an expression such as ‘100% - 120px’ so I found that adding a margin-right: 120px fixed the problem.

This is a bit sloppy I know; is there a better way to do this? I usually design standards compliant for FF and then tweak for IE, but since my organisation uses IE exclusively for the Intranet then FF compatibility isn’t an issue.


I’ll bare that in mind. Many thanks for your help.