CODEWITHSUNDEEP
htmlcss
Martin AJ
Martin AJ

Reputation: 6707

How can I fill the right side of an element with another one?

Here is my code:

.parent{
  direction: rtl;
  border: 2px solid;
  background-color: #eee;
  height: 50%;
}

.full_height{
  height: 100%;
  background-color: red;
}

.full_width1, .full_width2{
  width: 100%;
  background-color: green;
}
<div class="parent">
  <div class="full_height"></div>
  <div class="full_width1">something1</div>
  <div class="full_width2">something2</div>
</div>

This is expected output:

enter image description here

How can I implement that?

Upvotes: 0

Views: 15

Answers (1)

west efan
west efan

Reputation: 609

A possible solution could look like this:

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.parent{
  direction: rtl;
  border: 2px solid;
  background-color: #eee;
  height: 50%;
  overflow: hidden;
}
.full_height{
  float: right;
  height: 100%;
  width: 120px;
  background-color: red;
}
.full_width1, .full_width2{
  min-width: 120px;
  height: 50%;
  width: auto;
  overflow: hidden;
  background-color: green;
}
.full_width2{
   background-color: blue;
}

You can find a fiddle preview right here: https://jsfiddle.net/7pb8pxnx/2/

Upvotes: 1

Related Questions