Given three divs aligned horizontally, how can I make the center div clear the other two in the event that the browser window resizes?

Question

To go into more detail, consider this:

• I have a row of three divs (right), (center), and (left). （右）， （中）和 （左）。
• They are encapsulated within a parent div
• has the css style 具有css样式
• I have floated left 向左浮动
• I have floated right. 浮动。
• I have centered by setting . 使居中 。

: ：

I want the middle div to be centered until and collide with it. 和与其碰撞。 In the event that this happens (window resize). I want to clear both, and center itself underneath . 清除两者，并在下方居中。

What is the best way to achieve such a result? I understand I may have approached the set up wrong, please advise if that is the case!

Thanks in advance!

Answer 1

Like @atdrago mentioned, media queries is really the way to go here.

If your widths are fixed, you can also try floating the center div to the left and putting a (fixed) max-width on the .container element.

http://jsfiddle.net/mrhps/2/ is a working example.

Answer 2

Would have commented, but not enough reputation. Anyway, you will need a listener for resize - it will be nasty. Media Query is the way to go as mentioned.

is a working example

.C {
    margin: 0 auto;
    background-color: blue;
    @media (max-width: 20em) {
        clear: left;
        float: right;
    }
}

Sorry new here, it appears I need add code from the jfiddle to post a link...oO