How do I create a floating mutlicolumn template in CSS (Flexbox, float, inline-block)?
Let me first describe the situation - I want the following layout:
You can see that the red element on the side just floats to the right, every other element trying to fit the remaining space until it moves to the next line.
I am currently using a flexbox layout where main and main # 2 have flex: 1 1 70%; and yellow widgets have flexibility: 1 1 50% ;. Now for the tricky part, I don't want to indicate which items are to the left of the red box or not. Basically only to the side is there a fixed width (albeit in percentage). All other elements can be of different sizes and heights. So sometimes it may be that main base # 2 is not that high, so that widgets can also be positioned side by side with the red element to the side, but main base # 2.
My current approach with flexbox and container with
display:flex;
flex-direction:row-reverse;
flex-wrap:wrap;
gives me the following:
The problem is that flexbox does not allow 2 lines to the left and one line to the right, I am afraid there is no way to solve this. Floating is not an option because I cannot use overflow: hidden and floated did not allow me to indicate that the element should fill the remaining space by itself, or be, for example, 50% if it fits (one of the benefits of flexbox)
source to share
As I understand it, you want the footer to be on the left side of the sidebar when the content is less high and the full sidebar width is lower when the content is higher.
I did it with float and flex to stretch the widgets. Note that you don't need to use hidden overflow to clear floated elements.
Here is an example script
HTML:
<div class="wrap clearfix">
<div class="left">
<div>
main
</div>
<div>
main#2
</div>
</div>
<div class="right">
aside
</div>
<div class="footer clearfix">
<div class="footer-inner">
<div class="widget">widget</div>
<div class="widget">widget</div>
</div>
</div>
</div>
CSS
.clearfix:after {
content: "";
clear: left;
display: table;
}
.left {
float: left;
width: 70%;
height: 200px;
background: green;
}
.right {
float: right;
width: 30%;
height: 200px;
background: red;
}
.footer {
clear: left;
}
.footer-inner {
display: flex;
background: yellow;
}
.widget {
flex: 1;
float: left;
width: 50%;
}
source to share
This is an old school mockup - not a bad thing :) - and display: table
- a pretty simple solution.
Give an example! - all divs.
You have a more semantic example! - obviously you can div.wrap
ditch and throw away the HTML5 semantic elements.
Html
<div class="wrap">
<div class="left">
<div class="inner">
Hello
</div>
<div class="inner">
Hello
</div>
</div>
<div class="right"></div>
<div class="footer-wrap">
<div class="footer"></div><div class="footer"></div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
height: 100%;
}
.wrap {
display: table;
height: 100%;
width: 100%;
}
.left,.right {
display: table-cell;
}
.right {
width: 30%;
background: red;
}
.left {
width: 70%;
background: green;
}
.inner {
height: 50%;
}
.footer-wrap {
display: table-row;
}
.footer {
background: yellow;
height: 20px;
width: 50%;
display: table-cell;
}
source to share