浏览器宽度的100％宽度div

Question

I am trying to add two divs inside the parent div, which has a button inside each div. I need to fix the width in pixels only for the second div and the 1st div should be having width in % so that the button inside the 1st div should be covering the entire space of the browser.

I need all the widths in % and also I don't want to change either html structure and css because it is already implemented so i just need changes in css property.

Here is my demo http://jsfiddle.net/zuyyT/2/

PS : When I scale the browser, the second div is coming in next line. Please scale it and check once.

Answer 1

Fiddle is working on and off ... you can go either one of two ways; using floats (need to change the order of your markup) or positioning - like such ...

<div class="block">
    <div class="block_right"><a href=""> <span>last button</span></a> </div>
    <div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>

and your CSS ...

.block {
    display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
    background-color:#C93; margin-right: 150px;  
}
.block_left a{
    background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
    float:right; width:130px; background-color:#CC9
}

... using position, you'll need to add position:relative to .block and then right:0 to .block_right; keep the margin on .block_left

Using positioning, you won't need to change the order of the elements in your markup (should that be an issue).

Answer 2

This may be what you require. :-)

.block_right{
    position :absolute;
    right:0;
    top:0;
    float:right; width:130px; background-color:#CC9
}

Answer 3

If you give your block_left a width:100% and then use margin-right:-130px; you can leave your html exactly as it is.

The negative right margin leaves space on the right hand side for other elements to fit into even though the element has a 100% width.

Answer 4

发生这种情况是因为右侧div的宽度给父母100％，第一个孩子80％。所以，当浏览器大小为500px（比方说）时，第一个孩子将占用400px（80％）它...当你给第二个孩子130 px时，它会到达下一行...这很明显因为它在第一行没有足够的空间......所以它应该是<= 100px（本例）......