Any code or trick to combine fixed sizes(px) and responsive(%) for a single container?

Question

Sometimes I want to have a responsive container beside a fixed-sized container like a logo/icon that I don't want to resize, so for example, I have a logo with 100px width and beside that, I want a div that leaves that 100px and takes the rest of the viewport (meaning 100%-100px width)

Now if the responsive part is completely to the left or right of the viewport I can do what I want with a combination of 2 containers [outer: 100% width and -100px left margin] & [inner: 100px left margin] but if there's anything on the side of the responsive part I can't do that, meaning I can't do this inside another div with [width:50%, margin:auto]

div.side{float:left; width:15%; background-color:green; height:100px;}
div.middle{float:left; width:66%; margin:0 2%; height:100px;}
div.fixed{height:100%; width:100px; float:right; background-color:powderblue;}
div.responsive{height:100%; width:(?); float:left; background-color:red;}

<div class="side">
</div>
 
<div class="middle">
  <div class="responsive">
   This part should fill the line
 </div>
 <div class="fixed">
   My fixed Icon.
 </div>
</div>
 
<div class="side">
</div>

Now I want something to put in [width:(?)] to do what I want for me. or ofc if it means using multiple containers or anything.

add a codepen link , or at least a diagram , that would help you and us both — 9841pratik, Sep 18 '19 at 09:06

score 2 · Accepted Answer · answered Sep 18 '19 at 09:10

I have added some changes in CSS. Is it the result you want?

Here is the changes:

div.middle {
  float: left;
  width: 66%;
  margin: 0 2%;
  height: 100px;
  position: relative;
}

div.responsive {
  height: 100%;
  width: calc(100% - 100px);
  float: left;
  background-color: red;
}

Any code or trick to combine fixed sizes(px) and responsive(%) for a single container?

1 Answers1