My goal is to utilize only floats for this layout:
|A******* B******************|
|*300px * * auto *|
|* * * *|
|******** *******************|
|A******* |
|*300px * |
|* * |
|******** |
|B************|
|* auto *|
|* *|
|*************|
The challenge is to make Block B take up the remaining space and move below Block A when there is less than 500px of available space for it. Despite trying various combinations and solutions involving negative margins, I have not been successful.
The issue lies in the fact that CSS floats can stack vertically when no space is left, but only if a width is specified. However, when no width is specified, the block will expand to occupy all remaining space (which is what I need), but stacking becomes impossible. I require both features for Block B: taking up remaining space and moving under Block A on smaller screens.
What suggestions do you have for achieving this without using media queries or other modern features that are not supported in older browsers (such as IE8+) and without JavaScript?
This is the starting point:
<div id="blockA">
blockA
</div>
<div id="blockB">
<p>blockB</p>
<p id="stopper">stopper</p>
</div>
#blockA {
border: 1px solid powderblue;
width: 300px;
float: left;
}
#blockB {
border: 1px solid khaki;
margin-left: 300px;
}
#blockB > p#stopper {
width: 500px;
border: 1px solid blue;
}
Read on for the solution: