Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS combining % and px width

Tags:

html

css

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/

like image 831
user1355300 Avatar asked Dec 15 '22 22:12

user1355300


2 Answers

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

like image 131
Zeta Avatar answered Jan 09 '23 10:01

Zeta


.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.

like image 36
vijay Avatar answered Jan 09 '23 12:01

vijay