开发者

How to make the leftmost of many other left-floated fixed-width divs occupy remaining space?

开发者 https://www.devze.com 2023-02-25 17:00 出处:网络
I want this: +--CONTAINER DIV--------------+ <--- width 50%| <--- screen edge |+---------+开发者_StackOverflow中文版 +------+ +------+||

I want this:

+--CONTAINER DIV--------------+ <--- width 50%       | <--- screen edge
|+---------+开发者_StackOverflow中文版 +------+ +------+|                      |
||DIV1     | | DIV2 | | DIV3 ||                      |
|+---------+ +------+ +------+|                      |
+-----------------------------+                      |

When shrinking browser window width I want DIV1 to shrink accordingly (as many pixels). And likewise, when making the window wider, I would like DIV1 to occupy all the remaining space of the parent container. DIV2 and 3 are fixed-width. How?


I have removed padding and margin from all divs for this example.

Give container width 50%, and 2 and 3 their absolute width. Div one keeps default auto width.

You can put div 2 and 3 first in the markup and float them right. Then make div one have a right margin equal to 2 and 3 width added together.

See fiddle here: http://jsfiddle.net/P33hY/1/

html:

<div id="container">
    <div id="two">2</div>
    <div id="three">3</div>
    <div id="one">1 - Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</div>
</div>

css:

div{
    padding:0; margin:0;
}
#container{
    width: 50%;   
    border: 1px solid silver;
    background:gold;
}
#one{
    background:blue;
    margin-right:160px;
}
#two{
    background:green;
}
#three{
    background:red;
}
#two,#three{
    width: 80px;   
    float: right;
}


<div id="right">
    <div id="right1"></div>
    <div id="right2"></div>
</div>
<div id="left"></div>


#right{
    float:right;
    width:400px;
    height:500px;
    background:red;   
}
#right1,#right2{
    width:200px;
    height:500px;
}
#right1{
    background:yellow;
    float:left;
}
#right2{
    background:green
}

#left{
    margin-right: 200px;
    height:500px;
    background:blue;
}

Check working example at http://jsfiddle.net/9dMY5/

0

精彩评论

暂无评论...
验证码 换一张
取 消