View Full Version : #wrapper div showing through and wont go away, this should be an easy one.

grand poomba
11-21-2009, 07:55 AM
I'm here at the beginning laying out my site.

I have 5 div elements #wrapper, #header, #mainImage, #mainContent and #footer

As soon as I click into any of the div elements and hit type more than one line or hit carriage return then the #wrapper shows through separating the natural flow of the other 4 div elements.

For the life of me I can not figure out why it does this. I have looked at the code for them side by side and nothing changes there.

Here is what it looks like right after it has been built: http://www.totalfisherman.com/cr/index1.html

Here is after one carriage return: http://www.totalfisherman.com/cr/index.html

I know I must be missing something very fundamental but I have no clue what.

Any ideas?

Thank you!

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#header {
background-color: #03F;
#mainImage {
background-color: #0F3;
#mainContent {
background-color: #FF0;
#footer {
background-color: #F39;
#wrapper {
background-color: #F00;
<div id="wrapper">
<div id="header">header</div>
<div id="mainImage">image goes here</div>
<div id="mainContent">
<p>content goes here - One carriage return in DW and the red area, which is the #wrapper showing through, appears and cant be eliminated. </p>
<div id="footer">footer</div>

11-21-2009, 11:04 AM
I think the default setting of the <p> tag is causing that. To reset the default settings to 'null' use a reset.css

Example here:

grand poomba
11-21-2009, 04:49 PM
Your awesome! That is exactly what the problem was. I changed the margins for <p> to 0 and it fixed the problem.

Thanks again!!!