使左右浮动div不可调整大小

Question

I have 3 div's:

.left, .right {
    width: 30px;
    resize: none;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    max-width: 960px;
    margin: 0 auto;
}

What I want to achieve is that only the middle one resizes when resizing the browser. In the left and right div there is an image that is part of the design.

When I make the browser smaller, the left en right div will narrow at one point and it seems that it is getting pushed into the center div. This makes the content of the center being pushed down. How can I make sure the 2 div will stay @30px?

Strange thing is, in the jsfiddle it does work...

jsfiddle

Answer 1

The issue is with the <img /> element you have in the header. When you hide it you can see that it no longer interferes with your layout.

The problem is because the <img /> element will expand to the maximum size of the container, which is 100%. That 100% does not include the 30px you have reserved for each side, as floated elements are taken out of the document flow. Declaring 100% of a child element means it will expand to the width of its parent elements, without taking into account the extra space taken up by floated siblings. Therefore, a solution would be using CSS calc to constrain the width of .center , and float it to the left, too:

.center {
    width: calc(100% - 60px);
}

Alternatively, you can give .center a margin of 30px on the left and on the right. The floated divs will ignore margins because they are taken out of the document flow, and will fit perfectly within that 30px corridor you have created for them.

.center {
    margin: 0 30px;
}

Both methods I have tested and verified by playing with the Inspector on the link you have provided. The calc() method might suffer from lack of support in older browsers, while the margin method will work for most browsers that are in use today :) pick any one.

Answer 2

Try setting the horizontal margin for your center div to the known width of the left and right divs:

.center {
    max-width: 960px;
    margin: 0 30px;
}