dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Content Div separating from header, Please help!

  1. #1
    Join Date
    Dec 2009
    Posts
    9

    Content Div separating from header, Please help!

    Alright I have a simple header/content/footer css layout that i have used on other sites and worked fine. But for some reason this time while using it in a site to be made in HTML5 it isnt working quite right. When i just have the layout setup with no text or content it looks fine, the header, content, and footer areas bump up agaisnt each other like they should with no space between them. But as soon as i go into the content div(id="body" in my css) and put a <p>(paragraph) in with some text, it makes the content section including the background image move down creating a space between it and the header? I dont know what to do... Below is my CSS and Html.

    Heres the URL to the page, youll notice the space above the white content area that shows when i enter any text using a tag such as <p> or <h1>

    http://jason-storey.com/Smock-Etling/index.html


    CSS--
    html {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #1f4c65;
    height: 100&#37;;
    padding: 0;

    }
    #container {
    min-height:100%;
    position:relative;
    }
    #header {
    background-image:url(banner.png);
    width:800px;
    height:120px;
    margin-left:auto;
    margin-right:auto;


    }

    #body {

    background-image:url(content.jpg);
    width:800px;
    height: 700px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:60px;
    /* Height of the footer */

    }
    #footer {

    margin-left:auto;
    margin-right:auto;
    bottom:0;
    width:800px;
    height:60px; /* Height of the footer */
    background-image:url(footer.jpg);
    }

    HTML--
    <body>
    <div id="container">
    <header id="header">

    </header>

    <div id="body">



    </div>
    <footer id="footer">

    </footer>


    </div>
    </body>
    </html>
    Last edited by jasonhr13; 06-03-2011 at 12:48 PM.

  2. #2
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    it's because the <p> in your body section has a top and bottom margin of 16 pixels. That's what's pushing it lower. It's always a good idea to use a CSS reset to remove margin, padding, and other styling that browsers apply differently. This way you can start from a common, clean slate before applying your styling.

  3. #3
    Join Date
    Dec 2009
    Posts
    9
    Well when i do that and add that to my css, it still doesnt work. The point isnt the margins used by the <p> tag, The point is that i should be able to position that div in that spot, then have it not move down when i put in a paragraph.

    Using that reset now when i enter my text it just puts it in that space between my header and body, thousands and thousands of websites use this simple layout. There must be a simple fix that im missing or just dont know about

  4. #4
    Join Date
    Dec 2009
    Posts
    9
    the whole content div shouldnt move down when i input a paragraph, thats my point.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles