CODEWITHSUNDEEP
htmlcsscss-float
Harry
Harry

Reputation: 489

Floating div problem

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?

Upvotes: 1

Views: 984

Answers (3)

Emily
Emily

Reputation: 10088

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>

Upvotes: 1

ChssPly76
ChssPly76

Reputation: 100831

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.

Upvotes: 1

Kirtan
Kirtan

Reputation: 21685

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.

Upvotes: 0

Related Questions