Printable View
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.