Does anyone know how to make Block 3 not to go under Block2. I would like Block3 to show under Block 1, and Block 4 then would go on the right of Block 3.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
<title>Test</title>
<style type="text/css">
/* in the style below the width and border and margin must not be modified */
div.float_box {display: inline; float: left; width: 100px; border: 1px solid #ff0000; margin: 10px;}
p.clear {clear: both; height: 0px;}
</style>
</head><body>
<!-- This outside div must not be touched or modified -->
<div style="width: 300px; padding: 10px; border: 1px dashed #cccccc;">
<!-- Blocks' height must not be modified by adding contents or setting styles -->
<div class="float_box">Block 1<br><br><br><br><br></div>
<div class="float_box">Block 2<br><br></div>
<div class="float_box">Block 3<br><br><br><br><br><br><br><br></div>
<div class="float_box">Block 4<br><br></div>
<p class="clear"></p>
</div>
</body></html>
Thanks!
This obviously is only an example, but I need a solution that works idipendently from the length of the blocks, and indipendently from the number of the blocks. Someone suggested to use "clear: both", on block 3, but this would solve only this particular case, what if I had another block 5 of the same height or longer than block 3 and after another block 6, the problem would rise up again and to fix it I would have to set manually the clear both on block 5. I need a general solution, because I don't know in advance length and number of blocks (coz they are dynamically generated from a DB).
I would like to see all my blocks be displaied one close to the other (separated simply by the margin 10xp I set) while fitting into the outside div 300px box. Moreover the otside div box of 300px could expand and blocks inside should reposition themeselves adapting to the new size (for example by fitting into three/four columns).