How to make the sidebar full width to completely fill one side only?

Question

How to make the sidebar full width to completely fill one side only?

586 Views Asked by Snorlax At 22 August 2022 at 14:47

I have a container with max-width: 800px;, inside it there are two columns, col_1 and col_2, everything works as expected. For the initial code, if you put the page in full screen, col_1 is a long red column. To the left of the red column there is nothing, only white color. I want that white space to the left of col_1 to become the same color as col_1.

Update: Currently doing this with gradient background as recommended by user tobiv. But that's not always a good solution. For example, when loading pages, as the body tag is loaded first, the annoying gradient is displayed.

How can I achieve this goal?

Here is an example: https://www.uxlibrary.org/explore/ui-design/articles/design-systems

Here is the structure of my code:

body {
    background: linear-gradient(90deg, red 0%, red 50%, white 50%);
}

.container_one {
  display: block;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background: white;
}

.container_two {
  display: flex;
  width: 100%;
}

.col_1, .col_2 {
  display: flex;
  flex-direction: column;
}

/*Col Width */
.col_1 { 
  width: 20%; 
  border-right: 1px solid gray;
  padding-right: 15px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  background: red;
}

.col_2 { 
  width: 80%; 
  padding-left: 15px;
}

.element {
  background: #f3f3f3;
  margin: 5px 0; 
  padding: 10px;
}

<div class="container_one">
  <div class="container_two">
   <div class="col_1">
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
    </div>
    <div class="col_2">
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
    </div>
  </div>
</div>

Original Q&A

There are 2 best solutions below

tobiv On 22 August 2022 at 14:54

If you add a white (or other solid color) background to your main container, you can just add a gradient background with a hard center (so it's not really a gradient, rather a stripe) to the body:

.container_one {
    /* ... */
    background: white;
}

body {
    background: linear-gradient(90deg, red 0%, red 50%, white 50%);
}

**Nicolas Lucero** · Accepted Answer · 2022-08-22T15:27:25.903000

I'm not sure if I understood your question, but here is an example:

HTML

<body>
  <div class="container">
    <div class="left-side--container">
      <div class="col_1">
        <span class="element">Element 1</span>
        <span class="element">Element 2</span>
        <span class="element">Element 3</span>
      </div>
    </div>
    <div class="col_2">
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
    </div>
  </div>

  <body>

CSS

* { margin: 0; padding: 0;}

.container {
  display: flex;
  margin-left: 0;
  margin-right: auto;
}

.col_1, .col_2 {
  display: flex;
  flex-direction: column;
}

.left-side--container {
  display: flex;
  justify-content: flex-end;
  width: 30%;
  background: #FC664E;
}

.col_1 {
  width: 40%;
  border-right: 1px solid gray;
  padding-right: 15px;
  height: 100vh;
  background: red;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.col_2 { 
  width: 800px;
  padding-left: 15px;
  background: gray;
}

.element {
  padding: 10px;
  font-family: arial;
}

You only have to change #FC664E color to red.

How to make the sidebar full width to completely fill one side only?

There are 2 best solutions below

HTML

CSS

Related Questions in HTML

Related Questions in CSS

Related Questions in SIDEBAR

Related Questions in COLUMN-WIDTH

Trending Questions

Popular # Hahtags

Popular Questions