CODEWITHSUNDEEP
htmlcss
Spencer
Spencer

Reputation: 131

Height of right-top and right-bottom together equals left column

I have already got the right column split into a top and bottom portion. Within each portion, I am having trouble doing the following: I want the top to take up 50% of the height that the left column is and the bottom to take up the other 50% of the height of the left column.

+-------------------+-------------------+
|                   |                   |
|                   |(right top 50%)    |
|                   |                   |
|(left column fill) +-------------------+
|                   |                   |
|                   |(right bottom 50%) |
|                   |                   |
+-------------------+-------------------+

Here is my html

<div class="container">
<div class="container2">
    <div class="left_col">      
    <div class="right_col">
        <div class="right_top"> 
        <div class="right_bottom">
        </div>
        </div>
    </div>
    </div>
</div>
</div>

Here is my css

.container {
    clear: left;
    float: left;
    width: 95%;
    margin: auto;
    background-color: #F5F3ED;
    color: #333;
    overflow: hidden;

}

.container2 {
    float: left;
    width: 100%;
    position: relative;
    right: 50%

}

.left_col {
    float: left;
    width: 60%;
    position: relative;
    left: 52%;
    overflow: hidden;
    background-color: #C5D5CB;
    padding: 0.5em;
    border: 2px solid black;
}

.right_col {
    float: left;
    width: 30%;
    position: relative;
    left: 56%;
    overflow: hidden;
    margin: 0;
    padding: .5em;
}



.right_top {
    background-color: orange;
    height: 50%;
}

.right_bottom {
    background-color: green;
    height: 50%;
}

Upvotes: 2

Views: 85

Answers (1)

Paulie_D
Paulie_D

Reputation: 115061

Flexbox can do that.

* {
  box-sizing: border-box;
}
.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.left,
.right {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  border: 1px solid grey;
}

.left {
      height: 100px;
}

.right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.top,
.bottom {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 50%;
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
  border: 1px solid green;
}
<div class="wrapper">
  <div class="left"></div>
  <div class="right">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>

Upvotes: 3

Related Questions