How to combine fixed & relative with width 100%

Question

I have an issue regarding my html/css composition

I have a fixed menu on the right with a known width : 175px. What i want is to "fill" the space on the left of this div with an other div.

I hope you will understand what i am saying, anyway, thanks in advance !

Answer 1

DEMO HERE

CSS

#fixed {
    position:fixed;
    right:0;
    float: right; 
    width: 100px; 
    background: rgba(255,0,0,0.7);
    height:400px;
    text-align: center;
}
#relative {
    position:relative;
    margin-right: 100px;
    background: rgba(0,0,255,0.7);
    height:400px;
    width:100%;
    display: inline-block;
    float:right;
    text-align: center;
}

HTML

<div id="fixed" > 
    I am fixed. 
</div>
<div id="relative"> 
    I am relative, fluid, width 100%     
</div>

Answer 2

You can do something like this (it will work with older browsers) :

jsFiddle

HTML:

<div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna eget purus pharetra sodales. Integer in justo quis risus pellentesque fermentum. Donec sit amet pharetra arcu. Fusce imperdiet tempor eleifend.
</div>
<div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna eget purus pharetra sodales. Integer in justo quis risus pellentesque fermentum. Donec sit amet pharetra arcu. Fusce imperdiet tempor eleifend.
</div>

CSS:

.left { float:left; height:300px; background:blue; margin-right:175px; }
.right { width:175px; height:300px; background:red; position:fixed; right:0; }

Answer 3

Depending on the browsers that you need to support (IE9 >) you can use calc() in your CSS for the "fill":

.fill {
    width: calc(100% - 175px);
}

calc() is still labelled as "experimental technology" so be sure to read up on it before using - https://developer.mozilla.org/en-US/docs/Web/CSS/calc

More info regarding calc() support - http://caniuse.com/#search=calc

Answer 4

CSS

.LeftDiv {
    width:80%; 
    display:inline-block;*display:inline;zoom:1; /* The additional code is IE7-fix */
    height:500px;
    background:#aaa;
}

.rightDiv {
    width:175px;
    height:500px;
    display:inline-block;*display:inline;zoom:1;
    background:green;
}

HTML

<leftDiv>a</div><rightDiv>b</div>

most simple version of your request.