SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div positioning problem

    Hi, so I have two divs that line up flush to eachother, one right under the other. But, when I format the text in the divs as paragraphs, it creates a space in between them so they are not flush against eachother any longer. How can I best fix this?

    Code:
    <body>
    <div id="content">
      div1
    </div>
    <div id="footer">
      <p>div2</p>
    </div>
    </body>
    Code:
    div#content {
    	background-color: #CCCCCC;
    	min-height: 300px;
    }
    div#footer {
    	background-color: #333333;
    	color: #FFFFFF;
    	
    }

  2. #2
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Billiam

    Well, it looks to me like you need a total code reformat! Still, we all have to start somewhere, so lets see how we can help you.

    First off, When using more then 1 Div, You are going to need a global container.

    Code:
    <body>
       <div id="container">
          <div id="content">
             <p>Text</p>
          </div>
          <div id="footer">
             <p>Text</p>
          </div>
       </div>
    <body>
    *Note the div named "Container". See below for the CSS.

    Code:
    #container {
       background: somecolour;
       margin: 0;
       padding: 0;
       width: somepixals;
    }
    
    #content {
       background: #cccccc;
       height: 300px;
       margin: 0;
       padding: 0;
    }
    
    #footer {
       background: #333333;
       clear: both;
       color: #ffffff;
       margin: 0;
       padding: 0;
    }
    **Note the "clear: both;" <-- This tells the HTML to place the Footer BELOW the Content and not next to it.

    I hope this helps

    Please PM me if you need any more tips

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm or try formatting with <span> instead of <p>. Also, if your aim of using <p> is to create a first line space from the border of the footer div, then using <br /> instead of <p> in the beginning might be helpful.


Bookmarks

Posting Permissions

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