Positions of elements around another using CSS

Question

I want to achieve this result using HTML and CSS:

In those cases where the red frame represents large content (PDF content), and around it blue ones are organized. First next to him, and then, when there is enough space, under him.

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> 

Now the positioning remains like this:

I do not know if this is possible if you do not configure two containers (one on the side, one below), which I can do, but would make me write a lot of JS.

Answer 1

You can do something similar for list items, of course, it does not respond, 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 2

You can achieve what you want by having all the elements of the float and being 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 3

I personally will not use float. I suggest a column / row layout type. here is the fiddle: http://jsfiddle.net/xa91f4Lw/

just use display: inline-block and use a regular div when you want something to be a new "line"

---

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

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

Answer 4

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