Position elements around another with CSS

Question

I want to achieve this result with HTML and CSS:

Where the red box is a big content (A PDF content), and the blue ones organize around it. First by its side and then, when there is enough room, under it.

My HTML structure is as follows, but I can change it:

<div id="outerContainer">
    <div id="bigRedBox"></div>
    <div>
        <ul id="blueContentList">
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
        </ul>
    </div>
</div>

By now, the positioning stays like this:

I don't know if this is possible without setting up two containers (One on the side, one below), which I can do, but would make me write lots of JS.

Answer 1

You can achieve what you want by having all the elements float and be siblings of each other.

#bigRedBox {
  width:80%;
  height:150px;
  background-color:red;
  float:left;
  margin:5px;
}
.blueContent {
  width:15%;
  height:50px;
  background-color:blue;
  float:left;
  margin:5px;
}

<div id="outerContainer">
  <div id="bigRedBox"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
</div>

Answer 2

You could do something like this for the list items, of course, it's not responsive, but you can use % or media queries to optimize it.

#blueContentList li{
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
    float: left;
}

http://jsfiddle.net/tomsarduy/ywms6soq/

Answer 3

I personally wouldn't use floats. I suggest a column/row type of layout. here's a fiddle: http://jsfiddle.net/xa91f4Lw/

just use display: inline-block and make use of plain divs when you want something to be a new "row"

---

new fiddle: http://jsfiddle.net/xa91f4Lw/1/

or this: http://jsfiddle.net/xa91f4Lw/2/