0

I have the following HTML where the float-left and float-right classes do just that:

<div class="block-footer">
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-right">A</button>
   <button class="medium float-right">A</button>
</div>

This works but my div seems to occupy no vertical space and that's a problem for what follows. When I do this:

<div class="block-footer">
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-right">A</button>
   <button class="medium">A</button>
</div>

Then the DIV occupies space.

So how can I get some buttons to float to the left and some to the right and still have the DIV use some vertical space?

Samantha J T Star
  • 30,952
  • 84
  • 245
  • 427
  • Take a look at http://nicolasgallagher.com/micro-clearfix-hack/ you can try using this via your own `clearfix` class for the floated buttons. Like this: `.clearfix:before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; }` I however have not seen how this works on `button` elements but give it a try.. it also depends on the browsers you need to support, alternative you can add a clearfix `div` as the last child in `block-footer`. Also so you are aware, if you float the `block-footer` that also makes it wrap around its floated children. – Pricey Oct 23 '13 at 20:00

1 Answers1

2

You need to set overflow:auto on your container div.

jsFiddle example

This is due to block formatting context. Check out the answer to this question about how it works. Essentially the floats do just that, float, and act like they are removed from the document flow, which causes the container div to collapse.

Community
  • 1
  • 1
j08691
  • 204,283
  • 31
  • 260
  • 272