Alex Alex - 1 month ago 7
CSS Question

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

How can I accomplish the same look as in http://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>




Answer

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>