Setting 2 Div's side by side and 3rd Div should be below 2nd Div

user_214131 0
Viewed 47

I have a scenario like to display 2 Div's should be side by side and 3rd Div should be under 2nd Div. Both 2nd and 3rd Div heights are the same as 1st Div Height. All 3 Div's should be display like the image. Is there anything wrong in the below code?

enter image description here

code

.calendar-div {
  float: left;
  width: 350px;
  height: 800px;
  margin-right: 8px;
  background-color: green;
}

.list-div {
  margin-left: 358px;
  height: 500px;
  background-color: darkgray;
}

​ .legend {
  clear: both;
  margin-left: 358px;
  margin-bottom: 500px;
  height: 300px;
  background-color: coral;
}
<div class="calendar-div"> Calendar</div>
<div class="list-div">List</div>
<div class="legend"> LEGEND</div>

css html
3 Answers

display: flex makes us happy.

You're HTML should be like this.

<div class="wrapper">
  <div id="1"></div>
  <div class="wrapper_two>
    <div id="2"></div>
    <div id="3"></div>
  </div>
</div>

div 1, 2, 3 must have height. And css code is like

.wrapper {
  display: flex;
}

.wrapper_two {
  display: flex;
  flex-direction: column;
}

flex sets child elements in one line because it's default direction is row.

So #1 and wrapper_two sets in one line.

wrapper_twop has flex-direction: column;, so it sets child elements in one column.

user_137158150

Tweaking the approach you're taking, just removing clear: both; from .legend seems to do what you want. It does put it right up against the list-div without any space. You could add some top margin to it and reduce the height to make things cleaner.

I've got that in a codepen here: https://codepen.io/jhdoak/pen/abdPGvb

Does this do what you're trying to accomplish?

EDIT: This takes your current approach and tweaks it to meet your needs, but something like flexbox (see this answer) is a more modern approach.

user_58070030 

#container{
         width:80%;
         margin:40px 10%;
         background-color:lightgray;
         height:auto;
         display:flex;
         justify-content:space-between;
         align-items:center;
        }
        #left{
         width:50%;
         height:200px;
         background-color:blue;
        }
        #right{
         width:50%;
         height:200px;
         display:flex;
         flex-direction:column;
         justify-content:space-between;
         align-items:center;
         }
        .list-div{
         width:100%;
         height:100px;
         background-color:yellow;
          }
        .legend{
         width:100%;
         height:100px;
         background-color:red;
          }
<div id="container">
<div id="left">
<div class="calendar-div"> Calendar</div>
</div>
<div id="right">
<div class="list-div">List</div>
<div class="legend"> LEGEND</div>
</div>
</div>

user_139171620
Related