CODEWITHSUNDEEP
csscss-float
marreone
marreone

Reputation: 3

CSS Float left, right, left, right... and all to the top

Horrible title of this question, I know. Sorry.

I have four divs similar to this . What i want to do is simply to make the vertical space between div number 2 and 4 to be removed, and without changing the structure of the HTML. Is it possible to do with just CSS (of course without negative margins or other non generic solutions)? And I also want the div 1 and 3 to be without the vertical space in the case of a longer div 2 than 1.

The desired result would graphicly look something like this.

Thanks.

Upvotes: 0

Views: 281

Answers (2)

Jonas
Jonas

Reputation: 93

Well, not with just floats. That would be to use absolute positioning, or change the structure of the html so you have div number #2 and #3 hare right floated, and then a left float on div #4.

Absolute positioning and negative margins is another option, not very dynamic, but it works.

The best option would be to use a bit of jQuery to solve your problem. Check out: http://masonry.desandro.com/

Upvotes: 1

user900360
user900360

Reputation:

Add to the code of 4th div

position:relative;
top:-100px;

look for the class added to the 4th div

http://jsfiddle.net/eZGTm/1/

Upvotes: 0

Related Questions