issue in div with different resolutions

I have a simple web form with following div order.

<div id="outer" style="width:100%;height:100%">
<div id="navigation" style="width:20%;min-height:400px; float:left"></div>
<div id="expand-collapse" style="width:1%" heigth:30px; float:left"></div>
<div id="content" style="width:79%" min-heigth:400px; float:left"></div>
</div>

note: expand-collapse is conta开发者_JAVA百科ing a image.once i click on this content area is going to be expanded and next time it will collapse.

my problem is , when the page is displaying in defferent resolutions "expand-collapse" area get different different width. i know tht width of this should be going to with pixels insted of percentage.

I need to give different width for navigation and content area and fixed width for "expand-collapse" div.

is there any to handle this situation ?

thanks in advance

<div id="outer" style="width:100%; height:100%">
<div id="navigation" style="width:20%; min-height:400px; float:left"></div>
<div id="expand-collapse" style="width:10px; height:30px; float:left"></div>
<div id="content" style="min-height:400px; overflow:hidden;"></div>
</div>

Your style attributes aren't well-formed.

For the fix I simply add a new formatting context to #content: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

It is not easy when you mix pixel widths with percentages. But you can always improvise:

<div id="outer" style="width:100%; height:100%">
    <div id="navigation"      style="width: 20%; float: left; min-height: 400px; background-color: #F00;"></div>
    <div id="content-wrapper" style="width: 80%; float: left;">
        <div id="expand-collapse" style="width:       10px; float: left; background-color: #0F0; height:      30px;"></div>
        <div id="content"         style="margin-left: 10px; float: none; background-color: #00F; min-height: 400px;"></div>
    </div>
</div>

Demo here