Making multiple divs float left

sirichmond · 8 Oct 2012 at 16:04

Second question of the day and no doubt basic.

http://www.shinehairsalon.net/ATGNI/

See link above, I have one dive floated left with text then I'm trying to get the next one to float left underneath it but as you can see it wants to go to the right. Only wanting to put text down the left hand side in separate divs with the black background how do I do this as the divs are only 250px wide so it wants to put them next to each other.

CSS

#leftsmall {
float:left;
margin-top: 5px;
margin-bottom: 5px;
width: 250px;
text-align:justify;
padding: 10px;
background-image:url(images/backgrounds/blackbkg.png);
}

Thanks in advance
Simon

PiKe · 8 Oct 2012 at 16:07

clear:both

Randomface74 · 8 Oct 2012 at 16:10

You don't need to float anything. Divs are block level elements, they will flow under each other naturally. All you need is one extra div to put them all in.

sirichmond · 8 Oct 2012 at 16:14

Thanks for that, just now not sure where to implement it, where I put it in my code?

GravyMonster · 8 Oct 2012 at 16:27

Try this: http://jsfiddle.net/WYQ6G/

As billy says, you don't need to float anything because divs are block level anyway. I've also converted your use of the same id twice (which is invalid) to a class, and shortened the multiple background CSS attributes you were using. You should also be aware that background-size won't work in anything < IE9.

sirichmond · 8 Oct 2012 at 17:12

Thank you for that, much appreciated