Two div-s side by side inside another div

Vote count: 0

I have the following simple html code.

<div class="body-content">
  <div class="left-menu">
    abc
  </div>
  <div class="right-container">
    <div class="middle-view">
      def
    </div>
    <div class="right-view">
      ghi
    </div>
  </div>
</div>

And the .css

.body-content {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.left-menu {
    background-color: red;
    float: left;
    width: 50px;
}

.right-container {
    background-color: blue;
    width: 100%;
}

.middle-view {
    width: 70%;
    float: left;
    background-color: blueviolet;
}

.right-view {
    width: 30%;
    float: left;
    background-color: burlywood;
}

I am getting the following result:

But I would like to 'def' and 'ghi' side by side.

I don't have much experience using HTML and CSS but I thought middle-view and right-view together will fill right-container (70% + 30%). But as I see the width given to left-menu (50px) has impact on it.

asked 28 secs ago

Ashot Khachatryan

Let's block ads! (Why?)

Two div-s side by side inside another div