Question

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 javascript?

please don’t change the grid_1 and grid_3 width.

Answer 1

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.