CSS: Force float to do a whole new line

user_90025 0
Viewed 154305

I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.

Here is the page I'm talking about : link

If they are all the same size if works beautifully : link

Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)

css-float css html
7 Answers

This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.

By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.

So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:

.LeftImages{
    float:left;
}

html

<div class="LeftImages">   
  <img...>   
  <img...> 
</div>

This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).

If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.

user_59147390
Related