Question

I have special problem which I am trying to solve using CSS. My HTML layout is like this:

<div id="body">
    <div id="box1">lorem ipsum...</div>
    <div id="box2">lorem ipsum...</div>
    <div id="box3">lorem ipsum...</div>
    <div id="box4">lorem ipsum...</div>
</div>

and CSS is this:

div { display:inline-block;vertical-align:top }
#body { width:400px;outline:1px solid #eee }
#box1 { background-color:red;width:250px; }
#box2 { background-color:blue;width:150px }
#box3 { background-color:green;width:150px }
#box4 { background-color:yellow;width:150px }

The result then looks like this:

But my desired result should look like this picture below. It’s hard for me to describe it in words so I’ve just uploaded this graphic mock-up so you would get the idea what I want to achieve. Basically, the empty space between first and second row of boxes should disappeared and text in box #4 should “float” around box #2. I want only CSS solution if it is possible and it doesn’t need to support IE7 and below:

Here is jsFiddle for this scenario: http://jsfiddle.net/HUxWZ/

Anybody can help please ? Thanks in advance.

Answer 1

I’ve been fiddling a bit, this is my best shot:

http://jsfiddle.net/HUxWZ/10/

And with a touch of jQuery magic to make the text in yellow box flow around the blue one:

http://jsfiddle.net/HUxWZ/21/