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/

P.S : 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).