1

http://oi49.tinypic.com/2qithg4.jpg (example is a jpg img)

As You can see in the example; the boxes (after floating) gets a white space under it in order to make a room for an equal row of divs but I wanna float all of 'em to fill the gaps.. any suggestions?

That's what I wanna do (example is a jpg img)

http://oi47.tinypic.com/2nixr2x.jpg

Thanks in advance.

edit// Showing Alex some code :)

HTML 

<div id="content">
<div id="featured"></div>
<div class="box"></div>
<div class="box"></div>
<div style="width:310px; height:18px; margin:0 0 10px; padding:98px 0; text-align:center; float:left; display: block; background: #ffffcc;">Ad Space</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS

#content { }
#featured { width:630px; float:right; height:214px; margin:0 10px 10px 0; }
.box { float:left; width:310px; margin:0 10px 10px 0; height:400px; }
mskfisher
  • 3,291
  • 4
  • 35
  • 48
Hamo
  • 157
  • 1
  • 4
  • 11
  • I would suggest using a table instead of divs. – Max Apr 29 '12 at 18:19
  • 1
    Can you post what you already have in place? – g13n Apr 29 '12 at 18:22
  • 2
    @Teak the examples or not tabular data so suggesting s table for layouting is bad – PeeHaa Apr 29 '12 at 18:24
  • You might want to have a look at [jQuery Masonry](http://masonry.desandro.com/), although you can most lively achieve what you want to do with CSS alone. – Bojangles Apr 29 '12 at 18:24
  • @JamWaffles ya and I wanna do it with pure css :( – Hamo Apr 29 '12 at 18:26
  • @RepWhoringPeeHaa I guess I could have been more clear, however it looks to me like he could make a three column, one row table that would solve the problem. (I notice now that the div at the top right might cause problems) – Max Apr 29 '12 at 18:32
  • Guys I know that I can do it by positioning each box but I will make it for a dynamic content so I can't do it manually I need to do something automatically make boxes behave like the example. – Hamo Apr 29 '12 at 18:45
  • Could you put each of the 3 boxes inside one div? If you then set those outer divs to `overflow: hidden;` it would work :) – Andrea Apr 29 '12 at 18:57

1 Answers1

0

A similar question had been asked before: Vertical alignment of float:left div's, though no proper solutions were presented. As far as I guess doing it with pure CSS for a dynamic content would be difficult, so I would suggest to use jQuery Masonry for this task.

For a pure CSS approach, I guess it can be done using CSS3 columns as explained here.

Community
  • 1
  • 1
gopi1410
  • 6,567
  • 9
  • 41
  • 75