Tweet
Hello,
I just started playing around with CSS, and am puzzled by a small experiment I did. (for easy of practising, I embedded the CSS in the html file, I know it is better to have it seperate)
This is the code:
The thing that puzzles me is where the blocks containing 9 ,10, 11 and 12 go when the window gets more narrow.
If the width is just over the width of the top float left block, the blocks 1-12 are between both float blocks. Making the window smaller first makes 12, 11, 10 and 9 move to below the bottom float block. But making it smaller again puts them again above this block. I assumed they would allways appear below the bottom float block.
Any help on explaining what the logic behind this behaviour is? And it is possible to change it (e.g. to have 9-12 appear below the bottom float if they don't fit next to it)?
Thanks!
Jörg
I just started playing around with CSS, and am puzzled by a small experiment I did. (for easy of practising, I embedded the CSS in the html file, I know it is better to have it seperate)
This is the code:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.floatleft
{
float:left;
min-width:250px;
max-width:400px;
border:solid;
margin:0px;
}
.inlineblock
{
display: inline-block;
border:solid;
min-width:20px;
height:50px;
margin:0px;
}
.ablock{
display: inline-block;
border:dashed;
min-width:20px;
height:20px;
margin:0px;
}
.bblock{
display: block;
border:dashed;
min-width:20px;
height:20px;
margin:0px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<div class="floatleft">
<div class="ablock">a</div>
<div class="ablock">b</div>
<div class="ablock">c</div>
<div class="bblock"> data 1</div>
<div class="ablock"> data 2 </div>
<div class="ablock">block in float</div>
<div class="ablock">block in float</div>
<div class="ablock">block in float</div>
<div class="ablock">block in float</div>
<div class="ablock">block in float</div>
</div>
<div class="inlineblock">
<div class="bblock"> b1</div>
<div class="bblock"> b2</div>
</div>
<div class="inlineblock">1</div>
<div class="inlineblock">2</div>
<div class="inlineblock">3</div>
<div class="inlineblock">4</div>
<div class="inlineblock">5</div>
<div class="inlineblock">6</div>
<div class="inlineblock">7</div>
<div class="inlineblock">8</div>
<div class="floatleft"> float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float</div>
<div class="inlineblock">9</div>
<div class="inlineblock">10</div>
<div class="inlineblock">11</div>
<div class="inlineblock">12</div>
</body>
</html>
If the width is just over the width of the top float left block, the blocks 1-12 are between both float blocks. Making the window smaller first makes 12, 11, 10 and 9 move to below the bottom float block. But making it smaller again puts them again above this block. I assumed they would allways appear below the bottom float block.
Any help on explaining what the logic behind this behaviour is? And it is possible to change it (e.g. to have 9-12 appear below the bottom float if they don't fit next to it)?
Thanks!
Jörg