Alex Rivera | Logout

CSS: Ignoring divs height when floating

Asked 2012-01-12T22:43:28.563
11

I'm trying to display some pictures. All of them have the same width but different height. I'm trying to do something like: correct image

Every picture's class name is pic

<img class = "pic" src = .... />

In the stylesheet I specified the float:left attribute:

.pic{
    float:left
}

The end result isn't the one expected while every row is vertically aligned after the highest div from the row before: wrong

Is there a way to solve my problem in pure cross browser css?

html css css-float
Edit
Report

1 Answer

2

Are you able to add some extra markup?

If yes, you could make 3 columns with floating divs:

<div class="column">
    <img src="1.jpg" />
    <img src="4.jpg" />
</div>

<div class="column">
    <img src="2.jpg" />
    <img src="5.jpg" />
</div>

<div class="column">
    <img src="3.jpg" />
    <img src="6.jpg" />
</div>

Or just use jQuery to do that for you.

answered 2012-01-12T22:50:19.717

Your Answer