Question

I’ve a div with width in percentage. Is it possible to align two divs inside it (on left and right) so that the left div has fixed width defined in the px and margin to right in percentage, while the rest of width goes to the right div.

For example consider this:

<div class="box"> 

    <div class="left">

    </div>

    <div class="right">

    </div>
</div>

.box{
    width:100%;
    border:1px solid red;
    overflow:hidden;
}


.left{
    float:left;
    margin-right:5%;
    width:100px;    
}


.right{
    Problem..
}

Here’s jsfiddle link: http://jsfiddle.net/s8Gwb/1/

Answer 1

You shouldn’t mix relative and absolute values, since it’s hard or even impossible to calculate correct margins or position values with CSS only.

calc() hasn’t been implemented in any browser and is “at-risk and may be dropped during the CR period”.

If you still want to achieve something like this you should consider the following:

<div class="box">   
    <div class="left">left content</div>   
    <div class="right-wrapper">    
        <div class="right">right content</div>
    </div>      
</div>

.left{
    float:left;
    width: 100px;
}
.right-wrapper{
    margin-left:100px;
}
.right{
    margin-left: 5%;
}

JSFiddle Demo