0

How can I achieve the below layout in CSS? It's very simple but its turning out quite complex to code. The red div will contain an image advertisement and will always be 350px wide and always sit on the right side of the page. The green div will contain the website content and its width is dynamic, is should fill the remaining width leftover after the red div is inserted. Both divs should have the same height.

enter image description here

html, body {
  width: 100%;
  margin: 0 auto;
}

.green-div {
  background-color: green;
  display: inline-block;
  margin: 0 auto;
  height: 100%;

}

.red-div {
  background-color: red;
  display: inline-block;
  width: 350px;
  height: 100%;
}
<div class="green-div">
  <p>Green Div</p>
</div>

<div class="red-div">
  <p>Red Div</p>
</div>
sazr
  • 24,984
  • 66
  • 194
  • 362

1 Answers1

0

You can use flexbox to achieve this.

html, body {
  width: 100%;
  margin: 0 auto;
  display: flex;
  height: 100vh;
}

.green-div {
  background-color: green;
  flex-grow: 1;
  margin: 0 auto;
  height: 100%;

}

.red-div {
  background-color: red;
  width: 350px;
  height: 100%;
}
<div class="green-div">
  <p>Green Div</p>
</div>

<div class="red-div">
  <p>Red Div</p>
</div>
Robert Cooper
  • 2,160
  • 1
  • 9
  • 22