Width 100% causes horizontal scroll!

HTML & CSS
1

Hi,

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.

Cheers

2

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">
	<h1>Header</h1>
	<h2>SubHeader</h2>
	<p class="time">
		<script language="Javascript">
			document.write(displayDate());
		</script>
	</p>
</div>

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.

Cheers

3

Try setting margin and padding to zero on #masthead.

4

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

5

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!

6

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.

Cheers.

7

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

8