CODEWITHSUNDEEP
htmlcss
Hubvill
Hubvill

Reputation: 504

Stretch right sidebar background to the right edge of the screen

.container {
  width: 400px;
  margin: 0 auto;
}

.main-content {
  width: 75%;
  height: 500px;
  background-color: red;
  float:left;
}

.sidebar {
  width: 25%;
  height: 500px;
  background-color: blue;
  float:left;
}
<div class="container">
  <div class="main-content"></div>
  <div class="sidebar"></div>
</div>

I am trying to make my right sidebar's background blue color extend to the right edge of the screen. Right now the sidebar is in a fixed layout. The arrows in the image show where I would like the background to be blue.

enter image description here

EDIT: Added some code as requested.

Upvotes: 0

Views: 622

Answers (3)

Den Isahac
Den Isahac

Reputation: 1525

Procedure

To achieve the desired effect based on your HTML layout, set the sidebar width to 100% viewport width subtracted by the parent container width 400px, divided by 2, then plus the 25% width of the container (i.e. 25% + (100vw - 400px) / 2).

Then set the margin right, negative value of the 100% viewport width subtracted by the parent container width 400px, divided by 2 (i.e. 25% + (100vw - 400px) / 2 * -1).

CSS

.sidebar {
  width: calc(25% + calc(100vw - 400px /* 400px is the width of the .container */) / 2);
  margin-right: calc(calc(100vw - 400px /* 400px is the width of the .container */) / 2 * -1);
  height: 500px;
  background-color: blue;
  float:left;
}

Heads up change the value 400px according to the set .container width.

Test

Fill the sidebar with lots of contents to see it in action.

Upvotes: 0

Hewlett
Hewlett

Reputation: 161

Here you go. The grey area is where you can put your sidebar.

Updated: Full width containers with a fixed sidebar.

.container-fluid {
  float: left;
  width: calc(100% - 330px + 15px * 2);
  padding: 0;
}

.box {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.fixed-container {
  float: right;
  width: 300px;
}

.main-content {
  width: inherit;
  height: 500px;
  background-color: red;
  float: left;
}

.sidebar {
  width: inherit;
  height: 500px;
  background-color: blue;
  float: left;
}

.sidebar .bar {
  width: 50%;
  height: 500px;
  background-color: #ccc;
}
<div class="container-fluid">
  <div class="box">
    <div class="main-content column">
      <div class="foo"></div>
    </div>
  </div>
</div>
<div class="fixed-container">
  <div class="sidebar column">
    <div class="bar"></div>
  </div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

If you want your container to remain 400px wide (which I assume you want), you can assign a linear gradient background with an abrupt color change at 50% to the body as shown below. (Also add margin: 0to the body to prevent default margins.)

body {
  background: linear-gradient(to right, #fff 0%, #fff 50%, #00f 50%, #00f 100%);
  margin:0;
}
.container {
  width: 400px;
  margin: 0 auto;
}

.main-content {
  width: 75%;
  height: 500px;
  background-color: red;
  float:left;
}

.sidebar {
  width: 25%;
  height: 500px;
  background-color: blue;
  float:left;
}
<div class="container">
  <div class="main-content"></div>
  <div class="sidebar"></div>
</div>

Upvotes: 1

Related Questions