Two DIV's floated in the node contents interfere with the node footer

By lnuxguy on 27 Feb 2006 at 15:34 UTC

I'm developing a Page with PHP code. I've got two DIVs, which need to be side-by-side, so I float the both to the left (in the CSS, I use a "float: left"), which works GREAT. the problem is that now the node footer (which contains the author of the Page, as well as the various links to comment on it, etc..) shows up beside the DIVs, instead of below it. If I un-float the two DIVs, it puts the footer below the two DIVs, but then the DIVs are not side-by-side. How can I solve this? Here's a breakdown of the PHP in the Page:

blah blah

In the CSS file:
.c1 {
float: left;
}
.c2 {
float: left;
}

Comments

Here is one possiblity

nevets commented 27 February 2006 at 15:44

One way that should work, wrap the two floating divs (and any other pre-footer content) in a div. As the last part of that div, just before the closing tag add <br class="clear" />.

Thanks for the

lnuxguy commented 27 February 2006 at 16:26

Thanks for the response!

When I use that method, I end up with the 2nd div below the 1st, and then the footer below that. This is the same as what I get when I don't float at all. Is there another way that might work?

Got it!

lnuxguy commented 27 February 2006 at 17:08

Got it!

I add a wrapper DIV, then right before I close the wrapper DIV, I add this:

<br clear="all"/>

That did it. Thanks!!

You can also

t4him commented 27 February 2006 at 16:02

You can also wrap the div's like this;

Div id=wrapper
- - - next - - -
div - on this div use float left
- - - next - - -
div - use float: none; here, this will clear the float from the first div.

From this point on it will line up.

hope this helps

re: You can also

lnuxguy commented 27 February 2006 at 16:30

Thanks for the response!

When I use this method, I get the 2 DIVs next to each other (which is correct), but the node footer is directly below the 2nd DIV (which is over to the right). Is there a way to get the footer to drop down below everything?