css fluid design problem

please find the code in here: http://jsfiddle.net/yuliantoadi/XQuuT/

you could see grid_1 and grid_2 width are fixed 50px, but grid_2 width is 80%. the problem is when i decrease the wrapper width, the grid_3 div goes down.

any idea how to make the grid_3 stay in the top when we decrease the wrapper width without use javascr开发者_开发知识库ipt?

please don't change the grid_1 and grid_3 width.

Solution CSS:

.grid_1{
    float: left;
    width: 50px;
    background-color: green;
}
.grid_3{
    float: right;
    width: 50px;
    background: red;
}
.grid_2{
    background: yellow;
}

Solution HTML:

<div class="wrapper">
    <div class="grid_1">
        left
    </div>
    <div class="grid_3">
        right
    </div>
    <div class="grid_2">
        the content
    </div>
</div>

Note that the HTML sets up the left float first, then the right float, THEN the content, which is unfloated and thus renders between the floated elements. Also the content has no width defined, so it will fill the space.

The problem is caused by using a mix of fluid and fixed element widths.

Say your wrapper is 1000px wide - grid_1 is 50px, grid_3 is 50px and grid_2 is 80%, or 800px, which is fine, everything will line up nicely

If the wrapper is 400px wide, grid_1 and grid_3 are still 50px, grid_2 is 320px (80% of 400px), which means the three elements can't fit side-by-side, since 50+50+320 = 420px

Essentially, as soon as your wrapper is less than 500px wide you'll have grid_3 wrapping to a new line.

Without knowing exactly what you're trying to achieve, it's hard to offer a solution

I think that's not possible if grid 1 & 3 fixed width. To avoid grid 3 go down, you can set its min-width.

There is also an alternative method using negative margins. The HTML is the same, and you add negative margins to the left and right elements, and add positive margins to the center, allowing you to have the center div stretch all the way to the outside edges of the side divs.

[class^=grid_]{
    float:left;
}
.grid_1{
    width:50px;
    margin-right: -50px;
    background-color:red;
}
.grid_2{
    width: 80%;
    margin-left: 50px;
    margin-right: 50px;
    background-color:cyan;
}
.grid_3{
    width:50px;
    margin-left: -50px;
    background:red;
}