Martin AJ Martin AJ - 3 months ago 9
CSS Question

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?

Answer

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/