CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 397

Div to fill the remaining space.CSS

I have this sample

link

CODE HTML:

<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
}

Can you please tell me how I could have left a div div fixed and the right side of the blue to occupy all the remaining space.

I want the div .nav has always 200px.

Can you please tell me how to edit CSS code?

Thanks in advance!

Upvotes: 4

Views: 91

Answers (4)

gidzior
gidzior

Reputation: 1805

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>

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

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

Upvotes: 0

Ali Raza
Ali Raza

Reputation: 1241

#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>

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

A much simplier solution than using calc.

Just put the divs in a parent div and give the parent display:flex;

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

EDIT: Use flex:1 instead of width:80% on the second child div. This will make it take up the remaining space in the flex parent div.

.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>

Upvotes: 5

somethinghere
somethinghere

Reputation: 17330

Simply use 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>

Upvotes: 0

Related Questions