CSS Forum

**midwestkel** · 02:23 PM

I am having an issue with space between DIVs Here is the link to the site and below is the code. Thanks.

http://www.kellysportfolio.com/fups/..._template.html

CSS CODE

Code:

@charset "utf-8";
body {
 font: 100% Verdana, Arial, Helvetica, sans-serif;
 margin: 0; 
 padding: 0;
 text-align: center; 
 color: #000000;
 background-image:url(../images/bgr.jpg);
 background-repeat:repeat-x;
 background-position:top;
 background-color:#579448;
}
.oneCol #container {
 width: 850px; 
 margin: 0 auto; 
 text-align: left;
}
.oneCol #header {
 padding: 0; 
 margin: 0;
}
.oneCol #header img {
 display: block;
}
.oneCol #header h1 {
 margin: 0;
 padding: 10px 0; 
}
.oneCol #mainContent {
 padding: 0 20px; 
 background: #FFFFFF;
}
.oneCol #menu {
 padding: 0 10px; 
 background:#DDDDDD;
 margin: 0;
}
.oneCol #flash {
 padding: 0;
 background:#FFFFFF;
}
.oneCol #footer {
 padding: 0 10px; 
 background:#DDDDDD;
}
.oneCol #footer p {
 margin: 0; 
 padding: 10px 0; 
}

HTML CODE

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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/template_css.css" />
</head>
<body class="oneCol">
<div id="container">
  <div id="header">
    <img src="http://www.webmaster-talk.com/images/logo.png" alt="Oliver Manufacturing" />
  </div>
  <div id="menu">
    <p>MENU</p>
  </div>
  <div id="flash">
    <p>FLASH</p>
  </div>
 
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 Blah Blah </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
   </div>
 
  <div id="footer">
    <p>Footer</p>
  </div>
 
</div>
</body>
</html>

**LadynRed** · 02:14 PM

Zero out the default margins and padding on the <p> tags.
You're also going to need to put a 1px of top padding on #mainContent to close up the space there created by the margin-collapse (which is not a bug).

**midwestkel** · 08-07-2008, 02:22 PM

@LadynRed

Thanks, that worked! You are awesome!

**LadynRed** · 08-07-2008, 02:42 PM

Thanks - and you're welcome

**LadySaint** · 02-14-2012, 03:03 AM

I second that! Thank you - was struggling with that same problem for very long…..