Question

I’m trying to make responsive design. When screen is small comments should be below “Slikica”(Cyan DIV). But when I’m on the desktop version I want comments (Gray divs) to be warped around image.

• Cyan div has fixed width, and float left.
• Gray divs has unknown length (max 200chars), and they should be right to Cyan div. They are also floated left.
• If I set them width, 300px for example everything will work fine.

Look at image below, worth thousand of words.

<div id="content">
    <div id="slikica">Slikica</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div>
    <div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div>
    <div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div>
    <br class="clrfix" />
</div>

jsFiddle link

Answer 1

Just remove the float: left; on the comment DIVs. When floating each comment left to previous one, they won’t fit into the viewport.

http://jsfiddle.net/feeela/Xtuc9/1/