Specific "fill remaining width"

Is all I’ve got. All the rules must remain, as they’re part of my website. The “calc(x - y)” cannot be used as width changes on multiple dimensions (as seen in CSS).

How do I make blue div fill remaining width? This can’t be fixed value, it needs to adjust to the other div, and be always filling.

Hi,

As usual with these types of things there’s a 100 questions I could ask you about the dynamics of the layout least of all being that height:100% is a precarious property to use unless you know the limitation.

Ignoring the problems mentioned above you could do this in one of three ways (to start with).

  1. Float and overflow:hidden:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body, main { height: 100%; width: 100%; margin: 0; padding: 0; }
div#div1 {
  background-color: red;
  float:left;
  width: 200px;
  min-width: 15%;
  position: relative;
  height:100%;
}

div#div2 {
  background-color: blue;
  overflow:hidden;
  height:100%;
}

</style>
</head>

<body>
<main>
  <div id="div1">
   Ally
  </div>
  <div id="div2">
    Enemy
  </div>
</main>
</body>
</html>
  1. Display:table (but min-width won’t work).
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body, main { height: 100%; width: 100%; margin: 0; padding: 0; }
main{display:table;width:100%}
div#div1 {
  background-color: red;
  display: table-cell;
  width: 200px;
  /*min-width: 15%; doesn't apply to table-cells */
  position: relative;
}

div#div2 {
  background-color: blue;
  display: table-cell;
 
}

</style>
</head>

<body>
<main>
  <div id="div1">
   Ally
  </div>
  <div id="div2">
    Enemy
  </div>
</main>
</body>
</html>
  1. Flexbox for modern browsers.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body, main { height: 100%; width: 100%; margin: 0; padding: 0; }
main{display:flex;}
div#div1 {
  background-color: red;
  float:left;
  width: 200px;
  min-width: 15%;
  position: relative;
}

div#div2 {
  background-color: blue;
  overflow:hidden;
  flex:1 0 0;
}

</style>
</head>

<body>
<main>
  <div id="div1">
   Ally
  </div>
  <div id="div2">
    Enemy
  </div>
</main>
</body>
</html>

Which method you use depends on the criteria required for the layout and what you expect real content to do when squeezed.:slight_smile:

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.