PDA

View Full Version : Make div width span the entire page



JBauerisGod
Jul 20th, 2009, 04:18 AM
I always run into this problem when designing pages. Although the div's width reads 100% in the CSS, I'm always left with about a ten pixel gap on both sides of the div box in both IE and FF.

http://img40.imageshack.us/img40/1797/problems.gif

Where the lime green box is is where the gap lies (the green box was added in Photoshop). It looks exactly the same on the opposite side as well. Basically I just want the content box to go from one edge of the screen to the other.

Here's the code:
CSS (removed code for the header and navigation)


body{
font-family: "Trebuchet MS", Arial, san-serif;
}

.clear{
clear: both;
}

#hContainer{
width: 80%;
margin: 0 auto 0 auto;
}

/* Main Content */
#mContainer{
width: 100%;
background: #e3e3e3;
border-style: solid;
border-width: 6px 0 0 0;
border-color: #009690;
margin: -0.4em 0 0 0;
overflow: hidden;
}

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Massaponax Publications: The Growl</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="hContainer">
<div id="header">
<img src="images/logo.gif" />
<p>Friday, July 17, 2009</p>
<div id="nav">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Sports</span></a></li>
<li><a href="#"><span>Entertainment</span></a></li>
<li><a href="#"><span>Editorial</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Archive</span></a></li>
</ul>
</div>
<h1><a href="http://www.spotsylvania.k12.va.us/mhs">Massaponax High School</a> - 8201 Jefferson Davis Highway Fredericksburg, VA 22407</h1>
</div>
</div>
<div class="clear"></div>
<div id="mContainer">
<h1>Blah Blah Test</h1>
</div>
</body>
</html>

I'm probably doing something simple that's causing the problem. Seems like it would be an easy one to fix. Thanks!

BoldUlysses
Jul 20th, 2009, 05:31 AM
Try adding


* {
padding:0;
margin:0;
}

to the beginning of your CSS. This is called the universal reset and "zeroes out" all the default browser margins and paddings.

Welcome to CF, by the way!

JBauerisGod
Jul 20th, 2009, 05:44 AM
Try adding


* {
padding:0;
margin:0;
}

to the beginning of your CSS. This is called the universal reset and "zeroes out" all the default browser margins and paddings.

Welcome to CF, by the way!

Awesome! Thanks so much.