| SitePoint Sponsor |
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; }
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.
*Note the div named "Container". See below for the CSS.Code:<body> <div id="container"> <div id="content"> <p>Text</p> </div> <div id="footer"> <p>Text</p> </div> </div> <body>
**Note the "clear: both;" <-- This tells the HTML to place the Footer BELOW the Content and not next to it.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; }
I hope this helps
Please PM me if you need any more tips
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.
Posting Permissions
Bookmarks