Make right div fill the remaining space, but first in the HTML code

Question

How can I accomplish the same look as in https://stackoverflow.com/a/1032952/288568 but with the right div being the first in the HTML (so it appears first later when the site is displayed on a mobile where I stack left and right just on top of each other) ?

<html>

<head>
 <title>This is My Page's Title</title>
 <style type="text/css">
  #left {
   float:left;
   width:180px;
   background-color:#ff0000;
  }
  #right {
   width: 100%;
   background-color:#00FF00;
  }
 </style>
</head>

<body>
 <div>
  <div id="right">
   right
  </div>
  <div id="left">
   left
  </div>
 </div>
</body>

</html>

Is it important that the width of left is 180px? – react_or_angluar Oct 29 '16 at 09:56 — react_or_angluar, Oct 29 '16 at 09:56

score 3 · Accepted Answer · answered Oct 29 '16 at 09:51

If to use float, add this to your #right rule

float: right;
width: calc(100% - 180px);

<html>

<head>
  <title>This is My Page's Title</title>
  <style type="text/css">
    #left {
      float: left;
      width: 180px;
      background-color: #ff0000;
    }
    #right {
      float: right;
      width: calc(100% - 180px);
      background-color: #00FF00;
    }
  </style>
</head>

<body>
  <div>
    <div id="right">
      right
    </div>
    <div id="left">
      left
    </div>
  </div>
</body>

</html>

flexbox would be another option, here using its order property

<html>

<head>
  <title>This is My Page's Title</title>
  <style type="text/css">
    .wrapper {
      display: flex;
    }
    #left {
      width: 180px;
      order: 1;
      background-color: #ff0000;
    }
    #right {
      flex: 1;
      order: 2;
      background-color: #00FF00;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div id="right">
      right
    </div>
    <div id="left">
      left
    </div>
  </div>
</body>

</html>

calc(100% - 180px); never seen that before. nice solution with flexbox too! — react_or_angluar, Oct 29 '16 at 09:57

react_or_angluar · Answer 2 · 2016-10-29T09:52:00.213

2

#left {
  width: 20%;
  background-color: #ff0000;
}
#right {
  float: right;
  width: 80%;
  background-color: #00FF00;
}

<html>
<head>
 <title>This is My Page's Title</title>
</head>
<body>
 <div>
  <div id="right">
   right
  </div>
  <div id="left">
   left
  </div>
 </div>
</body>
</html>

edited Oct 29 '16 at 09:52

answered Oct 29 '16 at 09:38

react_or_angluar

1,568
2
13
20

Make right div fill the remaining space, but first in the HTML code

2 Answers2