Floating div problem

Question

I have a floating div with dynamic content in it. In the first row i need four divs, similarly in 2nd, 3rd ,4th etc... i need four divs. I can assign a class to a single div and it will automatically generate the rest of the divs. My problem is i can set the min-height to a div, but i cannot set the max height as the content is dynamically created. if the content is low the divs are not sitting in a straight row. for this reasons, the up coming divs also getting problem, how to arrange these divs?

Answer 1

One thing you can do is make the height fixed, and use overflow CSS property set to hide to hide the text, and use the title attribute to show the whole text in a tooltip.

Answer 2

Let's get this straight. You have multiple rows with 4 DIVs in each - let's call them cells just for fun. You want their height to be the same across the entire row while having dynamic content. I'm going to go out on a limb here and suggest you use a table.

Answer 3

On the first div the the new row, add clear:both;. That will make all the divs in a straight row.

div {float:left;border:1px solid #000;margin:20px;width:100px;}
.clear_both{clear:both;}
.one {height:100px;}
.two {height:50px;}
.three {height:200px;}
.four {height:150px;}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="two clear_both"></div>
<div class="three"></div>
<div class="four"></div>
<div class="one"></div>

Answer 4

Here is the solution.

http://www.lurnweb.com/130/how-to-fix-height-problem-with-floating-divs/