Expand <div> Element to Width of screen-CodePudding

I have (2) div elements displayed as inline-block's.

I'm attempting to make the second div container that is wrapped around a <p> element extend to the width of the screen. Not sure how to accomplish this.

Ideally, the red container will stretch to the edge of the screen to the right.

<div style="background-color: grey; width:16px; display: inline-block;">
  <p>-</p>
</div>
<div style="background-color: red; display: inline-block;">
  <p>Test Text</p>
</div>

CodePudding user response：

You want the second block to behave like a display: block (taking up as much width as possible) while keeping the first block as a display: inline-block.

Thus, in this case, you need a float: left, not display: inline-block.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="background-color: grey; width:16px; float:left">
        <p>-</p>
    </div>
    <div style="background-color: red;">
        <p>Test Text</p>
    </div>
</body>
</html>

Note: a more modern way of doing this is using display: flex.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="display: flex;">
      <div style="background-color: grey; width:16px;">
          <p>-</p>
      </div>
      <div style="background-color: red; flex: 1;">
          <p>Test Text</p>
      </div>
    </div>
</body>
</html>

CodePudding user response：

If you want to keep your element as display: inline-block, you can make use of calculation-driven variables, and set the second div to occupy 100% of the width of the container minus the width of the first element (and margins):

:root {
  --left-width: 16px;
}

div:nth-of-type(1) {
  display: inline-block;
  background-color: grey;
  width: var(--left-width);
}

div:nth-of-type(2) {
  display: inline-block;
  background-color: red;
  width: calc(100% - var(--left-width) - 4px);
}

<div>
  <p>-</p>
</div>
<div>
  <p>Test Text</p>
</div>