adaptive main column width around sidebar

77
June 15, 2018, at 8:30 PM

I'm working on a custom stylesheet, therefore I have no way of editing the HTML itself. The idea is quite simple. I need to make the main column or its contents to dynamically arrange itself under the sidebar whenever the end of the latter is reached. Frankly I'm ready to give up on this because I don't think it's possible. Any help would be appreciated. Thanks.

#content {
      width: 500px;
      height: 450px;
      display: block;
      background: rgba(0, 0, 0, 0.25);
      position: relative;
}
.thin {
      width: 100%;
}
.name {
      display: block;
      height: 40px;
      width: 100%;
      margin-top: 10px;
      background: rgba(0, 0, 0, 0.25);
}
.sidebar {
      display: block;
      float: right;
      margin-top:5px;
      width: 100px;
}
.box.a1 {
      width: 100%;
      height: 50px;
      display: block;
      margin-top:5px;
      background: rgba(0, 0, 0, 0.25);
}
.box.a2 {
      width: 100%;
      height: 50px;
      display: block;
      margin-top:5px;
      background: rgba(0, 0, 0, 0.25);
}
.box.a3 {
      width: 100%;
      height: 50px;
      display: block;
      margin-top:5px;
      background: rgba(0, 0, 0, 0.25);
}
.main_background {
      float: left;
}
.main {
      float: left;
      width: 375px;
}
.box.b1 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
}
.box.b2 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
}
.box.b3 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
}
.box.b4 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
}

jsfiddle representing the current situation. jsfiddle representing the desired outcome.

Answer 1

If you have to do it with CSS only, you could use a ::before pseudo element inside your main-div and float it to the right (.main::before in my example below).

That way it would act as a "placeholder" for your sidebar. You would need to position: absolute the sidebar to the right and place it directly above the placeholder-pseudo-element. Don't forget to give the box.b classes overflow: hidden;.

This solution only works if you know the size of the sidebar though. Other solutions would include JavaScript.

Here is my example (I colored the placeholder purple):

#content { 
      width: 500px; 
      height: 450px; 
      display: block; 
      background: rgba(0, 0, 0, 0.25); 
      position: relative; 
} 
.thin { 
      position: relative; 
      width: 100%; 
} 
.name { 
      display: block; 
      height: 40px; 
      width: 100%; 
      margin-top: 10px; 
      background: rgba(0, 0, 0, 0.25); 
      position: relative; 
} 
.sidebar { 
      display: block; 
      margin-top:5px; 
      width: 100px; 
      position: absolute; 
      right: 0; 
} 
.box.a1 { 
      width: 100%; 
      height: 50px; 
      display: block; 
      margin-top:5px; 
      background: rgba(0, 0, 0, 0.25); 
} 
.box.a2 { 
      width: 100%; 
      height: 50px; 
      display: block; 
      margin-top:5px; 
      background: rgba(0, 0, 0, 0.25); 
} 
.box.a3 { 
      width: 100%; 
      height: 50px; 
      display: block; 
      margin-top:5px; 
      background: rgba(0, 0, 0, 0.25); 
} 
.main_background { 
      width: 100%; 
} 
.main { 
} 
.main::before { 
  background-color: rgba(89, 39, 140, 0.4); 
  content: ""; 
  display: inline-block; 
  height: 165px; 
  float: right; 
  position: relative; 
  margin-left: 10px; 
  width: 100px; 
  z-index: -1; 
} 
.box.b1 { 
    display: block; 
    height: 85px; 
    background: rgba(0, 0, 0, 0.25); 
    margin-top: 10px; 
    overflow: hidden; 
} 
.box.b2 { 
    display: block; 
    height: 85px; 
    background: rgba(0, 0, 0, 0.25); 
    margin-top: 10px; 
    overflow: hidden; 
} 
.box.b3 { 
    display: block; 
    height: 85px; 
    background: rgba(0, 0, 0, 0.25); 
    margin-top: 10px; 
    overflow: hidden; 
} 
.box.b4 { 
    display: block; 
    height: 85px; 
    background: rgba(0, 0, 0, 0.25); 
    margin-top: 10px; 
    overflow: hidden; 
}
<div id="content"> 
  <div class="thin"> 
    <div class="name"></div> 
    <div class="sidebar"> 
        <div class="box a1"></div> 
        <div class="box a2"></div> 
        <div class="box a3"></div> 
    </div> 
    <div class="main_background"> 
        <div class="main"> 
					  <div class="box b1"></div> 
					  <div class="box b2"></div> 
					  <div class="box b3"></div> 
					  <div class="box b4"></div> 
        </div> 
    </div> 
  </div> 
</div>

READ ALSO
Fixed height and width only for desktop

Fixed height and width only for desktop

I am trying to implement a Vimeo video however for it to show correctly on mobile etc I have to have it in the responsive share mode however on desktop/notebook etc we want to have it a fixed height and width- how can I do this?

82
Iframe, maintain original css inside it

Iframe, maintain original css inside it

I have the following situationI've a html page with some graphs on it

74
Using mixins in material-ui to customize components in React

Using mixins in material-ui to customize components in React

I am trying to customize a textfield component in Material-ui with React

151
Fixed position footer moving in mobile Chrome

Fixed position footer moving in mobile Chrome

I have a position:fixed footer on a huge form that has been moving after opening the keyboard and scrolling a bitIt happens because the address bar shows/hides, and the footer moves the same height as the address bar, going up and down

123