Question

Css noob here in need of some advice.

I have a form that sometimes has 2 divs side-by-side (with input/labels inside/validators). Any further divs after this don’t format correctly, not even with a clearfix.

[div] [div]
--> clear div goes here
[   div   ]

I’ve fixed it with another Div with css {clear:both;} but this is superfluous. Whats more I’ve found that IE needs a height on the clear div to honour any margin on the lower div.

Is there a better method of dealing with this?

Answer 1

It’s tough to see exactly what issue you’re having without seeing the code, but hopefully this helps.

<div class="one" style="float: left;"> This div is floated left </div>

<div class="example1" style="clear: left;">this is text in example 1</div> <!-- notice clear left means this dive will appear after the float, no matter how much stuff is in the float -->

if class one is floated left, then example 1 would appear right next to it, but in this case you cleared the float to the left (which is class one) so example 1 appears below your floated object.