How to have 3 divs aligned up next to each other so that they are in between a bottom and top div?

Question

I want 3 divs to be aligned up next to each other so that they are in between a bottom and top div. When floating all 3 divs to the left they are pushed to the bottom of the surrounding divs. If I float all the other divs it leaves a huge gap up top.

There is another lot of divs to the left of these divs which have css clear:left . When this is removed all the divs are the floated next too each other up the top of the page.

Is there an alternate route around aligning divs? or am I just doing something wrong?

Answer 1

I don't know if you have anything against a responsive css framework like Bootstrap, but if you don't mind using it (or some of it's css):

 .top { background-color: red; height: 200px; } .middle { background-color: blue; height: 200px; border-style: dotted; box-sizing: border-box; } .bottom { background-color: yellow; height: 200px; } .col-md-12, .col-sm-12, .col-xs-12 { width: 100%; float: left; } .col-md-4, .col-sm-4, .col-xs-4 { width: 33.33333%; float: left; } 

 <div class="top col-md-12 col-sm-12 col-xs-12"> </div> <div class="middle col-md-4 col-sm-4 col-xs-4"></div> <div class="middle col-md-4 col-sm-4 col-xs-4"></div> <div class="middle col-md-4 col-sm-4 col-xs-4"></div> <div class="bottom col-md-12 col-sm-12 col-xs-12"> </div> 

box-sizing: border-box; is just to prevent the border to overflow the last div to the next row.

Answer 2

My guess is you need to give the bottom div clear: left so that it doesn't move above your three floating divs.

See The One True Layout for an example of this done successfully.