'How to get the divs to overlay without the content?

How would I make the middle divs overlay but also get their content to show up correctly and not overlay as I have it here. So basically I want the color to overlay as it is but not the content (text in this case) to do the same. Here is the code and an image.

<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle">
            <div class="content">
                Content
            </div>
        </div>
    </div>
</body>

body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.container {
    display: flex;
}

.left, .right {
    position: fixed;
    display: block;
    width: 90px;
    height: 100vh;
}

.left {
    left: 0;
    border-right: 1px solid #000;
}

.right {
    right: 0;
    border-left: 1px solid #000;
}

.middle {
    display: block;
    width: 100%;
}

.content {
    padding: 50px;
    border-bottom: 1px solid black;
    background-color: rgb(244, 242, 240);
}

enter image description here

htmlcssfrontendoverlay


Solution 1:[1]

Can try something like this. Basically, just define a width on the left and the content, then rearrange your markup accordingly.

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

.left,
.right {
  position: fixed;
  display: block;
  width: 90px;
  height: 100vh;
}

.left {
  left: 0;
  border-right: 1px solid #000;
  background-color: rgb(244, 242, 240);
  width: 10%;
}

.right {
  right: 0;
  border-left: 1px solid #000;
}

.content {
  margin-left: auto;
  text-align: center;
  width: 100%;
  padding: 50px;
  border-bottom: 1px solid black;
  background-color: rgb(244, 242, 240);
}
<body>
  <div class="container">
    <div class="left"></div>
    <div class="content">
      Content
    </div>
  </div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kameron

Related Questions