CODEWITHSUNDEEP
htmlcssflexbox
Eike Thies
Eike Thies

Reputation: 1319

How to create a floating mutlicolumn layout in CSS (Flexbox, float, inline-block)?

First let me describe the situation - i want to achive the following layout:

enter image description here

You see the red aside element is basically just floating to the right, every other element tries to fit the remaining space until it just breaks to the next line.

Currently i'm using a flexbox layout, where main and main#2 have flex: 1 1 70%; and the yellow widgets have flex: 1 1 50%;. Now the tricky part is, i don't want to specify which elements are at the left of the red aside box or not. Basically only aside has a fixed width(although in percentage). All other elements can be of varying sizes and height. So sometimes it might be that main#2 is not so tall, so that widgets might also be positioned side-by-side to the red aside element but belor main#2.

My current approach with flexbox and a container with

display:flex;
flex-direction:row-reverse;
flex-wrap:wrap;

gives me this: actual result

The problem is flexbox does not allow 2 rows left and one row right, i fear there is just no way how to solve this. Floating is not an option because i cannot use overflow:hidden and also floating would not allow me to specify that the element should itself fill up the remaining space or be e.g. 50% if it fits(one of the advantages of flexbox)

Upvotes: 3

Views: 1766

Answers (2)

Igor Jerosimić
Igor Jerosimić

Reputation: 13741

As I understand it you need footer to be on the left side of the sidebar when content height is smaller and full width bellow sidebar when content is higher.

I made it by using floats, and flex to stretch widgets. Note that you don't need to use overflow hidden to clear floats.

Here is a Sample fiddle

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%;
}

Upvotes: 3

misterManSam
misterManSam

Reputation: 24702

This is an old-school layout - not a bad thing :) - and display: table is a pretty straightforward solution.

Have an example! - all divs.

Have a more semantic example! - obviously you can forgo div.wrap and throw in 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;
}

Upvotes: 0

Related Questions