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.

Deterge

If you know the width of everything in advance, can't you just float: left on the red div? Then all you need to do is make sure the blue divs are the appropriate width to fit in 1 column down the side – Stadiometer

You want to look into flexbox for something like this. – Visitant

In addition to @Visitant you could as well take a look into Isotope – Unpack

Answer 1

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/

Murmur

Answer 2

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>

Compline

It would be better to keep the list structure, but this is a simple solution. – Deterge

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/

Television

This would be tough for me, because this page is dynamic and I would have to calculate where to put each element. Why would you avoid the float attribute? – Deterge

floats take elements out of the normal layout of the page, which I don't like. you get forced into using more floats, or having to calculate the heights/widths of things. Using inline-block is good for dynamic pages because the container will resize based on the amount of content inside the page. I'll update the fiddle with an alternative – Television

Answer 4

You can check the grid structure already provided by bootstrap. Alternatively you can also try to achieve this using applying float : left to all the square elements.

Reproval