CODEWITHSUNDEEP
htmlcss
user1355300
user1355300

Reputation: 4987

CSS combining % and px width

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/

Upvotes: 4

Views: 14242

Answers (4)

smilebomb
smilebomb

Reputation: 5483

Perhaps abandon this idea, use an absolute positioned div with a floating div that has a margin. This what you want? http://jsfiddle.net/jefffabiny/s8Gwb/39/

Upvotes: 1

Zeta
Zeta

Reputation: 105886

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

Upvotes: 7

Dexter Huinda
Dexter Huinda

Reputation: 1222

Please see if this is the effect you want: http://jsfiddle.net/s8Gwb/28/

I have edited your css and removed float: right from the .right layer

Upvotes: 2

vijay
vijay

Reputation: 2034

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


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

 }


.right{
    float:right;
   left:100px;    //notice this same as width of div left
    position:absolute;

} Hope this works for you.

Upvotes: 2

Related Questions