<p> tags causing Divs to break apart

Discussion in 'Web Design and Development' started by MorphingDragon, Mar 25, 2010.

  1. MorphingDragon macrumors 603

    MorphingDragon

    Joined:
    Mar 27, 2009
    Location:
    The World Inbetween
    #1
    I'm coding a website for a graphics design studio and I'm having a little problem. Having <p> tags anywhere in the container Div causes any other divs inside it to break apart. I've attached screenshots. I've never coded a website like this before so I have no clue how to fix it.

    Heres a copy of the code (Please dont kill me for using dreamweaver generated 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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Missing Box Studio</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    body {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    	background-color: #FFF;
    	background-image: url(../images/bg.png);
    	background-repeat: repeat-x;
    }
    .oneColFixCtr #container {
    	width: 955px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 0px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    	filter:alpha(opacity=90);
    	-moz-opacity:0.9;
    	opacity: 0.9;
    }
    .oneColFixCtr #header {
    	width: 955px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 0px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .oneColFixCtr #footer {
    	width: 955px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 0px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .oneColFixCtr #mainContent {
    	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    	background-image:url(../images/bgdiv.png);
    	background-repeat:repeat-y;
    }
    body, td, th {
    	color: #FFF;
    }
    -->
    </style>
    </head>
    <body class="oneColFixCtr">
    <div id="container">
      <div id="header"> <img src="../images/topdiv.png" alt="If you can see this, please enable images. Missing Box Studio." width="955" height="23" border="0" usemap="#Map" />
        <map name="Map" id="Map">
          <area shape="circle" coords="12,10,7" href="index.html" alt="Home" />
          <area shape="rect" coords="412,3,543,20" href="index.html" alt="Home" />
        </map>
      </div>
      <div id="mainContent">
        <p>lol</p>
        <!-- end #mainContent -->
      </div>
      <div id="footer"> <img src="../images/bottomdiv.png" alt="If you can see this, please enable images. Missing Box Studio." width="955" height="27" border="0" />
        <!-- end #container -->
      </div>
    </div>
    </body>
    </html>
    
     

    Attached Files:

  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    p tags having default padding and margins associated with them. That is where your issue is coming from. I see it a bit on heading tags too.
     
  3. MorphingDragon thread starter macrumors 603

    MorphingDragon

    Joined:
    Mar 27, 2009
    Location:
    The World Inbetween
    #3
    Do you know how to fix it without making the container a solid colour? I've tried setting padding and margins to 0 through CSS.

    EDIT: NVM, Syntax error.
     
  4. citizenzen macrumors 65816

    Joined:
    Mar 22, 2010
    #4
    It's probably overkill, but one of the first things I do in CSS is...

    a, p, h1, h2, h3, h4, h5, ul, li, span, div, td, tr, table {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }

    If anybody would like to laugh over my little bit of CSS voodoo, be my guest.
     
  5. MorphingDragon thread starter macrumors 603

    MorphingDragon

    Joined:
    Mar 27, 2009
    Location:
    The World Inbetween
    #5
    This is all it needed.

    Code:
    <h1 style="margin:0;">Contact</h1>
    That way it's only applied on the tags that needed margin 0 applied.
     
  6. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #6
    It's not overkill at all - see Eric Meyer for the reasons why: http://meyerweb.com/eric/tools/css/reset/

    Also you should try and avoid embedding styles - it's effectively going back to the old tag soup with font tags etc. Fine for a quick check to see if a proposed fix does work but as soon as you have verified the behaviour it should be moved into an external sheet especially if it's going to be used on more than one page.
     
  7. zlinuk macrumors member

    Joined:
    Jul 8, 2008
    Location:
    UK
    #7
    I agree, the first rule in any of my css files looks like this

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    
    It goes some way to giving you a level playing field to start with.
     
  8. a cat *miaow* macrumors regular

    Joined:
    Jun 12, 2007
    #8
    Resetting everything is very good practice. The reset method linked to above is my preferred choice (with a couple of site specific tweaks).

    As another poster added, in CSS you don't need to write the four measurements for top,left etc if they are all the same: just defining once will do. And if you're defining a measurement of zero, zero is the same in all units! So no need for the 'px' either (makes writing it out that tiny bit quicker :) )
     
  9. RobertD63 macrumors 6502

    Joined:
    Feb 17, 2008
    Location:
    A place
    #9
    Sorry to jack the thread really quick but isnt it bad practice to have CSS with the HTML on the same .html file? For larger sites that is. I'm just starting to learn CSS but from what I've read so far its better to have an external style sheet?
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Yes, it's better to have CSS in an external file so it's easier to organize things and you can change things from a single location.
     

Share This Page