Menu with blocks side by side, a fixed and other fluid

Question

How do I make a horizontal menu with a flowing width on one side and a fixed width on the other side?

The menu will not be fixed at the top and needs to work in most browsers(this because I cannot use the css Calc).

I’m wearing the bootstrap.

Answer 1

Something like that?

.bg-dinamico{
  display: flex;
    justify-content: space-between;
    background: blue;
    margin:0px!important;
    color:white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="row bg-dinamico">
  <div style="background:blue">Fluid</div>
  <div style="width:200px;background:red">Estatic</div>
</div>

Answer 2

I made a really simple model, look if it fits you.

To div left has no size, but has a right margin that is the size of the right div. That way I did the "Calc" just discounting with the margin the size of the other div.

Would that be: <div> on the left with 100% width for being an element block and margin-right:200px and a <div> right width 200px and floar:right

Look at the code you’ll understand, I made it as simple as possible.

body {
    background-color: red;
    margin: 0;
}
.cont::after {
    content: "";
    clear: both;
}
.dir {
    background-color: aqua; 
    width: 200px;
    float: right;
    height: 70px;
    margin: 5px;
}
.esq {
    background-color: black;
    height: 80px;
    margin-right: 210px;
}

<div class="cont">
    <div class="dir"></div>
    <div class="esq"></div>
</div>

I also did the ::after in the container of divs with clear:both; not to overlap with divs down.