How do you set a floating div's width to take up remaining space without pushing other divs down?

Question

For part of a layout I want to make, I want to use three divs, all floating next to each other. The Left and Right have a max-width set, which works fine, but I want the middle

Answer 1

Classic Floats

If you order it:

and you float the left column left, and the right column right, the middle column should fill in the remaining space. You will have some issues with margins, borders and paddings though.

---

Flexbox

If you don't need to support older browsers, you can use flexbox. With flexbox, this sort of structure becomes much simpler, and the markup doesn't need to change.

You will need to be able to select the parent element, so for the purposes of this demo, the code will be wrapped by

.

.wrapper {
  display: flex;
  flex-direction: row;
  height: 200px;
}

.left {
  background-color: red;
  width: 100px;
}
.middle {
  background-color: green;
  flex: 1;
}
.right {
  background-color: blue;
  width: 100px;
}

The height and widths are added explicitly so that the

s are visible. With actual content, the columns would automatically adjust.

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...