Need right to flow UNDER left on small screens (Fixed width right, Variable width Left)

Question

I need a fixed right column, and the left column to take up the remaining space. Then on mobile both columns will be full width, and the right column should float UNDER the left.

I followed this Stack question on how to make the right column fixed, and the left column a variable width: make a div fill up the remaining width

This involved me moving the right column div above the left column div in the HTML. So now in smaller browsers when I make both columns 100% width, the right side floats above the left, but I would like the right column to float under the left.

Any ideas on what to change?

<div id="main">
  <div id="primary">
    left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
  </div>
  <div id="container">
    middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller
  </div>
</div>

#main { 
  width: 100%; 
}
#primary { 
  width: 100px;
  float: right;
  background-color: #fcc;
}
#container { 
  background-color: #cfc; 
  overflow: auto;
}

@media screen and (max-width: 500px) {
    #primary, #container{
         width: 100%;   
    }
    #primary{
        float:none;
    }
}
}

https://jsfiddle.net/8pk4K/2157/

Are both columns the same height? If the right column is shorter, do you want the left column to fill in the space beneath the right column? — gilly3, May 27 '15 at 23:18
@gilly3 they are not the same height. And no I probably don't want the left content to flow under the right. Just leave it as white space if the right is shorter than the left. — KVDD, May 27 '15 at 23:21
i have added a solution with container div wrapping around the primary — Felix A J, May 27 '15 at 23:49

score 1 · Answer 1 · answered May 27 '15 at 23:14

Perhaps try this:

HTML

<div id="main">
  <div id="container">
    middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller
  </div
  ><div id="primary">
    left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
  </div>
</div>

Note that the reason the "container" div close tag is extended out is because there can't be any whitespace between the container and primary divs, or else extra space will be put between them.

CSS

#main { 
  width: 100%; 
}
#primary { 
  width: 100px;
  right: 0px;
  background-color: #fcc;
  display: inline-block;
}
#container {
  vertical-align: top;
  display: inline-block;
  background-color: #cfc; 
  overflow: auto;
  top: 0px;
  left: 0px;
  width: calc(100% - 100px);
}

@media screen and (max-width: 500px) {
    #primary, #container{
         width: 100%;   
    }
}
}

score 1 · Accepted Answer · answered May 27 '15 at 23:24

1

1; Place the container first in the HTML mark-up followed by the fixed width div.

2; Set the elements to display:table-cell; on wide screens and display:block; on narrow screens

#main { 
  width: 100%; 
}
#primary { 
  width: 100px;
  display:table-cell;
  background-color: #fcc;
}
#container { 
    display:table-cell;
    background-color: #cfc; 
    overflow: auto;
}

@media screen and (max-width: 500px) {
    #primary, #container{
         width: 100%;   
    }
    #container{
        display:block;
    }
    #primary{
        display:block;
        width:100%;
    }
}

https://jsfiddle.net/Nillervision/hpsnqs60/

answered May 27 '15 at 23:24

Nillervision

451
2
10

TABLE-CELL!!!! You're a genius. I don't know why I didn't think of that. Thanks, it works like a charm! – KVDD May 27 '15 at 23:32
You're welcome. But may I also suggest that you use class names as CSS selectors. It's kind of a convention now to almost exclusively use class names and that way you can reuse the styles for many elements. – Nillervision May 27 '15 at 23:38
The only reason it's using 'ids' is because it's a wordpress template. If I have the time I might go through and change my base template to classes (and add in that table trick) – KVDD May 28 '15 at 00:00

mc01 · Answer 3 · 2015-05-27T23:18:01.540

What you posted floats "primary" to the right & gives it a fixed width, even though you're calling it "left div left div left div." This is the reverse of what your explained above. On small screens it should put "primary" first and then "container" in the order they appear in the HTML, which is exactly what happens.

Give both a width (percentage works) and float accordingly. Easiest fix is to swap the HTML order...

https://jsfiddle.net/8pk4K/2159/

#main { 
  width: 100%; 
}
#primary { 
  width: 10%;
  float: right;
  background-color: #fcc;
}
#container { 
  background-color: #cfc;
    width: 90%;
  overflow: auto;
  float:left;
}

@media screen and (max-width: 500px) {
    #primary, #container{
         width: 100%;   
    }
    #primary{
        float:none;
    }
}
}

<div id="main">

      <div id="container">
        middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller
      </div>
      <div id="primary">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
      </div>
    </div>

This does not work for me, as I need the right side to be FIXED. Aka not a percentage. I need it 400px, and then the left to fill in the space. — KVDD, May 27 '15 at 23:23

score 0 · Answer 4 · answered May 27 '15 at 23:34

You most certainly want to put the right column second in the HTML. After that, there are numerous ways to accomplish what you want with the CSS.

One way to do it is to use absolute positioning on the right column, adding padding-right on the parent element:

#main {
  position: relative;
  padding-right: 100px;
}
#primary { 
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fcc;
}
#container { 
  background-color: #cfc; 
}

@media screen and (max-width: 500px) {
  #main {
    padding-right: 0;
  }
  #primary, #container{
    width: auto;   
  }
  #primary{
    position: static;
  }
}

<div id="main">
  <div id="container">
    middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller
  </div>
  <div id="primary">
    left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
  </div>
</div>

jsfiddle.net/8pk4K/2160

score 0 · Answer 5 · answered May 27 '15 at 23:46

0

I have updated the fiddle with a few lines of javascript also.

placed the promary div as absolute.

Here is the fiddle - https://jsfiddle.net/8pk4K/2162/

answered May 27 '15 at 23:46

Felix A J

6,300
2
27
46

Need right to flow UNDER left on small screens (Fixed width right, Variable width Left)

5 Answers5