Div to fill the remaining space. CSS

Question

I have this sample

link

HTML CODE:

<div class="nav">
  <ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
    <li>Link4</li>
  </ul>
</div>
<div class="right">
  asdasdsa
</div>

CODE CSS:

.nav{
  float:left;
  display:inline-block;
  width:200px;
  background:red;
}
.right{
  background:blue;
  width:80%;
  float:left
}

Could you tell me how I could leave the div div fixed and the right side of blue to occupy all the remaining space.

I want a div .navalways200px.

Could you tell me how to edit CSS code?

Thanks in advance!

Answer 1

A simpler solution than use calc.

Just put the div in the parent div and give to the parent element display:flex;

It also means that you can simplify your CSS by removing the display:inline-block;and properties float.

EDIT: flex:1 width:80% div. div flex.

.nav{
  width:200px;
  background:red;
}
.right{
  background:blue;
  flex: 1;
}
.flex{
  display:flex;  
}

<div class="flex">
<div class="nav">
  <ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
    <li>Link4</li>
  </ul>
</div>
<div class="right">
  asdasdsa
</div>
</div>

Answer 2

calc:

.nav{
  float:left;
  display:inline-block;
  /* Apply a width of 20% for older browsers that dont have calc */
  width: 20%;
  /* Apply the correct width for browsers that support calc */
  width: calc(200px);
  background:red;
}
.right{
  background:blue;
  width: 80%;
  width: calc(100% - 200px);
  float:left
}

<div class="nav">
  <ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
    <li>Link4</li>
  </ul>
</div>
<div class="right">
  asdasdsa
</div>

Answer 3

body {
    padding: 0;
    margin: 0;
}
main {
    display: flex;
    flex-direction: column;
}

section {
    flex: 1 1 100vh;
    display: flex;
}

aside {
    flex: 0 0 256px;
    order: 0;
    background: cornflowerblue;
}

article {
    flex: 1 1 100px;
    order: 1;
    background: crimson;
}

<main>
    <section>
        <aside>
          <nav>
            <ul>
              <li>Link1</li>
              <li>Link2</li>
              <li>Link3</li>
              <li>Link4</li>
            </ul>
          </nav>
        </aside>
        <article>
          asdasdsa
        </article>
    </section>
</main>

Run code

BEST SOLUTION FOR MODERN VIEWS - http://jsfiddle.net/mu748why/16/

for more information go here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}
</style>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

Run code