Container full width

Question

first of all, sorry for the title not really explicit

Here is my problem: I've container, inside it a sidebar which is 280px, and I would like to make the home page full width. But if I write something like this

.container {
  width: 100%;

  .sidebar {
    width: 280px;
  }

  .home {
    width: 100%;
  }
}

the home page goes underneath, and I would like to position aside the sidebar. But I have no idea how to do it

Do you mean make the `home` div take up the rest of the space? It's not clear what you are asking. — Paulie_D, Aug 15 '17 at 12:02
Possible duplicate - https://stackoverflow.com/questions/1260122/expand-a-iv-to-take-the-remaining-width — Paulie_D, Aug 15 '17 at 12:02
Learning Flexbox or CSS grids would be a great help for making these types of templates — Brad, Aug 16 '17 at 14:37

score 2 · Accepted Answer · answered Aug 15 '17 at 12:08

Here is a CSS solution using calc() function to minus the .sidebar width from .home

#container {
  width: 100%;
  height: 300px;
}

#container .sidebar {
  width: 280px;
  height: 100%;
  background: blue;
  display: inline-block;
  color:#fff;
}

#container .home {
  width: calc(100% - 285px);
  height: 100%;
  background: yellow;
  display: inline-block;
}

<div id="container">
  <div class="sidebar">SideBar</div>
  <div class="home">Home</div>
</div>

kinggs · Answer 2 · 2017-08-15T12:14:58.820

The following will create a sidebar with a fixed width of 280px and a div (.home) with a fluid width:

SCSS

.container {
  width: 100%;
  overflow:hidden;

  .sidebar {
    float:right; /* or float:left for left sidebar */
    width:280px;
  }

  .home {
    margin-right:280px; /* or margin-left for left sidebar */
  }
}

HTML

<div class="container">
  <div class="sidebar">

  </div>
  <div class="home">

  </div>
</div>

score 0 · Answer 3 · answered Aug 15 '17 at 12:13

0

This should work: https://jsfiddle.net/0bsygLsh/

.container {
  width: 100%;
  overflow:hidden;

  .sidebar {
    width:280px;
    display:inline-block;
    float:left;
  }

  .home {
    width:auto;
  }
}

answered Aug 15 '17 at 12:13

pr191ex

88
1
14

score 0 · Answer 4 · answered Aug 15 '17 at 12:14

It seems like you need to read about the CSS display property. This is perhaps the most important thing to know when dealing with CSS. See here https://www.w3schools.com/cssref/pr_class_display.asp

Here's an example of using display: flex to solve your problem. Your problem could be solved in several ways though. Consider attempting it yourself using display: inline.

.container {
  display: flex;
  height: 100vh;
}

.sidebar {
  flex-basis: 100px;
  background-color: red;
}

.home {
  flex: 1;
  background-color: blue;
}

<div class="container">
  <div class="sidebar">
    I'm the sidebar
  </div>
  <div class="home">
    I'm the home page
  </div>
</div>

Yeah I will. Most of the time I only use `inline`, `inline-block` for the property `display` That's why I wasn't aware of that Thanks for the knowledge! :) — Mavrick RMX', Aug 15 '17 at 12:27

score 0 · Answer 5 · answered Aug 15 '17 at 12:21

If you want to make the home div full width and the sidebar div should be on top of it then the css will be following:

    .container {
      width: 100%;
      position: relative;
    }
   .sidebar {
      width: 280px;
      position: absolute;
      top: 0;
      left: 0;
   }

   .home {
      width: 100%;
      padding-left: 280px;
   }

Or if you want to keep them side by side then the css should be following:

.container {
      width: 100%;
}
.container:after {
    display: table;
    content: "";
    clear: both;
}
.sidebar {
   float: left;
   width: 280px;
}

.home {
   float: left;
   width: calc(100% - 280px);
}

Container full width

5 Answers5