Grid style layout

Question

I basically want to use css and html to position elements such that they take up whatever space they fit. So I have a grid-like structure, with elements stacked up nicely. The problem is that I can't get the small boxes to fill up beside the large box. e.g. http://jsfiddle.net/9pk4J/1/

HTML:

<section id="cubes">
  <div>
          <article class="large"></article>
        </div>
  <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
</section>

CSS:

#cubes {
font-size:0;
position: absolute;
    max-width:670px;
}
#cubes div {
display:inline-block;
padding:3px;
}
#cubes div article.large {
cursor:pointer;
display:inline-block;
height:300px;
width:492px;
background-color:rgba(0,0,0,0.5);
overflow:hidden;
}
#cubes div article {
cursor:pointer;
display:inline-block;
height:150px;
width:160px;
background-color:rgba(0,0,0,0.5);
overflow:hidden;
}

I realize there are methods where I could name specific elements and use absolute positioning to put them in place, but ideally I would like to have them fit vertically and horizontally into place using just css and html.

Answer 1

I agree with @Luis that Masonry is probably a better bet, but if you can fix the width and the sizes of the boxes, you can accomplish this with straight CSS. If you're always going to have 1 large box first, then several small ones, just float:left on all your divs and you're good to go. Shown here:

http://jsfiddle.net/9pk4J/2/

Answer 2

I would recomend using a plug in for that, Masonry it's the name, and you can check its page.

There is a version with Jquery and other one with only CSS ('vanilla version')

Here is a live demo with your previous fiddle http://jsfiddle.net/9pk4J/5/

html Markup

<section id="cubes">
    <div class="box">
        <article class="large"></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
</section>

js Markup

$('#cubes').masonry({
    itemSelector: '.box',
    columnWidth: 100,
    isAnimated: true
});

Jquery Masonry

Vanilla Masonry

Hope it helps!