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

Navigation
1

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

The menu will not be fixed at the top and needs to work on most browsers (this is because I can not use css calc).

I'm using the bootstrap.

    
asked by anonymous 12.05.2016 / 15:06

2 answers

2

Something like this? 

.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>
    
19.12.2017 / 12:59
1

I made a very simple model, look if it caters to you.

The left side% has no size, but has a right margin that is the size of the right div . That way I did the "calc" just by cashing in the size of the other div .

It would be: div on the left with 100% width for being a block element and margin-right: 200px and a <div> on the right with 200px wide and <div> / p>

Look at the code that you will understand, I did it in the simplest way 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 have also made the floar:right in the container of ::after with divs to not overlap in the clear:both; that come down.

    
19.12.2017 / 15:47
C # - Separate / cut string with commas (but with monetary value included in the string) Give a value for input radio not selected