CSS / HTML Help: Background will not fill browser

**insanejoker** · 01-07-2015, 12:31 PM

Hello!

So right now I'm redoing my site (again), and wanted to fill one of my divs with a solid color, but have it fill the entire browser window width wise. I know the wrapper itself won't have any issues with that, as other sites I have it fills up the browser window, but not sure how I can do that with the NAVIGATION div.

Here is the css / html:

Code:

#container
{
	margin: 0 auto;
	width:100%;
	height:700px;
	
}

#header
{
	height:150px;
	width:1000px;
	border-style:solid;
	border-width:4px;
	margin: 0 auto;

}

#navigation
{
	width:100%;
	height:50px;
	margin:0 auto;
	background-color: #565656;
	background-repeat: repeat-x;
}

.navigationtext
{
	text-align:center;

}

#content
{
	width:1000px;
	height:800px;
	border-style:solid;
	border-width:4px;
	margin: 0 auto;

}

<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jcmi_css.css">
<title>
Home
</title>
</head>

<body>
<div id="container">
	<div id="header">
	image
	</div>
	<div id="navigation">
		<div class="navigationtext">
		navigation
		</div>
	</div>
<div id="content">
content here
</div>
</div>
</body>
</html>

I know it's a long shot to ask here but I know there are lots of website coders floating around so. XD A shot in the dark!
I am getting some css / html books this week so if no one knows the answer I should be able to find it in there.

**Noxid** · 01-07-2015, 12:41 PM

if you add

Code:

body {margin:0px;}

it should behave as you want
tip: right-click and select "inspect element" in your preferred browser to bring up some developer tools that can highlight the different parts of the box model for different elements in your page, this can help you identify problematic areas

**insanejoker** · 01-07-2015, 12:55 PM

AHHH that worked!!

thank you

And I will keep that in mind

THANK YOUUU

**Socks the Fox** · 01-08-2015, 07:42 PM

should probably be

Code:

html,body{margin:0}

Some browsers have the page margin on the <body> tag, some have it on the <html> tag (I think IE did).

**DarkShadow777** · 09-24-2015, 07:49 PM

This page may help you in case you need more assistance and coding tips:

http://www.w3schools.com/

Maybe it helps you as well

**Socks the Fox** · 09-25-2015, 02:30 AM

I have heard that w3schools often contains outdated or just plain wrong information. The Mozilla Developer site is a far better source of information.

https://developer.mozilla.org/en-US/docs/Web/Guide

Thread: CSS / HTML Help: Background will not fill browser

Thread Tools

Search Thread

CSS / HTML Help: Background will not fill browser

Posting Permissions