Expand a div to fill the remaining width

by

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a “block formatting context” (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it’s set on become a BFC. BFCs don’t allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can’t recall.

Demos:

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}
<div>Tree</div>
<div class="second">View</div>

More Related Contents:

  1. How do I change Bootstrap 3 column order on mobile layout?
  2. How to write a:hover in inline CSS?
  3. Two inline-block, width 50% elements wrap to second line [duplicate]
  4. Why does overflow hidden stop floating elements escaping their container?
  5. HTML-Tooltip position relative to mouse pointer
  6. Generate scroll bar for overflow to the left
  7. Load a low-res background image first, then a high-res one
  8. How to make a flex item not fill the height of the flex container? [duplicate]
  9. Floating Div Over An Image
  10. How To Add CSS3 Transition With HTML5 details/summary tag reveal?
  11. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  12. Can I use an image from my local file system as background in HTML? [duplicate]
  13. Align a div to center
  14. Complete list of reasons why a css file might not be working
  15. How to remove the space between list items [duplicate]
  16. How can I make Bootstrap 4 columns all the same height? [duplicate]
  17. Changing image src depending on screen size
  18. How to keep styles after animation?
  19. Make Bootstrap’s Carousel both center AND responsive?
  20. What is HTML’s tag default display type?
  21. How to create a heart shape using CSS?
  22. Balanced text wrapping in HTML
  23. Why is my .sticky-top class not working in Bootstrap 4?
  24. Use the HTML tag as a background image instead of the CSS background-image property?
  25. Make plus symbol in CSS
  26. How to make Bootstrap cards the same height in card-columns?
  27. Alignment of content vertically in adjacent flexbox containers
  28. How to center-justify the last line of text in CSS?
  29. overflow-y:visible not working when overflow-x:hidden is present [duplicate]
  30. Flex elements ignore percent padding in Firefox

Leave a Comment