CODEWITHSUNDEEP
htmlcsssassless
Mavrick RMX'
Mavrick RMX'

Reputation: 108

Container full width

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

Upvotes: 1

Views: 1877

Answers (5)

Shuvo
Shuvo

Reputation: 1293

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

Upvotes: 0

kinggs
kinggs

Reputation: 1168

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>

Upvotes: 0

Benjamin Gorman
Benjamin Gorman

Reputation: 370

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>

Upvotes: 0

pr191ex
pr191ex

Reputation: 88

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

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

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

  .home {
    width:auto;
  }
}

Upvotes: 0

frnt
frnt

Reputation: 8795

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>

Upvotes: 2

Related Questions