CODEWITHSUNDEEP
htmlcss
almondn
almondn

Reputation: 11

Align two div next to each other and third div under them

How do I place two div's side by side and the third one below them? Like this:

enter image description here

My Current code is like below:

HTML:

<div id="container">
    <div class="div-1">div1</div>
    <div class="div-2">div2</div>
    <div class="div-3">div3</div>
</div>

CSS:

#container {
     position: absolute;
}

.div-1 {
     float: left;
     width: 45%;
     padding: 2%;
}

.div-2 {
     clear: both;
}

.div-3 {
     float: right;
     width: 45%;
     padding: 2%;
}

Upvotes: 0

Views: 4257

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122135

You can use Flexbox

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#container div {
  padding: 20px;
  border: 1px solid black;
  margin: 10px; 
}

.div-1, .div-3 {
  flex: 1 1 0;
}

.div-2 {
   flex: 100%;
   order: 3;
}
<div id="container">
    <div class="div-1">Div 1</div>
    <div class="div-2">Div 2</div>
    <div class="div-3">Div 3</div>
</div>

Upvotes: 4

Related Questions