CSS Float with 4 divs

Question

I have 4 divs within the footer div of my site and I can't get the floats to work properly so they sit correctly.

This is the structure;

<div class="footer"> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> </div>

Div One needs to be full width and run the full length of the page above the other three which should all sit next to each other taking up a third of the page each.

Any suggestions on the best way to handle this?

Answer 1

Why not something simply like:

#one {
  width: 100%;
}

#two, #three, #four {
  width: 33.33%;
  float: left;
}

Output can be seen here.

You can also extend this with unknown DIV names by utilising .footer div:nth-of-type(1) instead:

.footer div:nth-of-type(1) {
  width: 100%;
}

.footer div {
  width: 33.33%;
  float: left;
}

I've created an extendable output here.

Hope this helps!

Answer 2

All you need to do is float #two,#three,#four and assign a width of 33.3%, but you likely also want to clear the overflow from .footer via overflow: auto; or some other clearfix technique.

.footer {
  overflow: auto;
}
#two,#three,#four {
  float: left;
  width: 33.33%;
}

Alternatively, you can do this with flexbox

.footer {
  display: flex;
  flex-wrap: wrap;
}
#one {
  width: 100%;
}
#two,#three,#four {
  flex-grow: 1;
  flex-basis: 0;
}