CODEWITHSUNDEEP
htmlcss
Codes316
Codes316

Reputation: 303

Stacking Boxes in HTML and CSS

I wanted to create three boxes and align them properly. It would be two boxes in 1 row and a third box under the second box. The second and third box would have the height equal to the first box. You can visually see what I'm trying to do here: http://codepen.io/sibraza/pen/KMzwWR

Here is an example of what I'm trying to achieve: Three Boxes Stacked

Snippet:

.block {
  float: left;
  display: inline-block;
  margin: auto;
  width: 250px;
  height: 200px;
  border: 3px solid #73AD21;
  padding: 10px;
  margin-left: 300px;
  margin-top: 200px;
}
.block2 {
  float: left;
  display: inline-block;
  margin: auto;
  width: 250px;
  margin-top: 200px;
  border: 3px solid #73AD21;
  padding: 10px;
}
.block3 {
  float: left;
  margin: auto;
  width: 250px;
  height: 200px;
  margin-top: 290px;
  border: 3px solid #73AD21;
  padding: 10px;
}
<div class="container-fluid">

  <div class="row">
    <div class="col-4-md text-center block">
      <h2> Some Text </h2>
    </div>
    <div class="col-4-md text-center block2">
      <h2> Other Text </h2>
    </div>
    <div class="col-4-md text-center block3">
      <h2> More Text </h2>
    </div>
  </div>

</div>

Upvotes: 0

Views: 3995

Answers (3)

Brajendra Swain
Brajendra Swain

Reputation: 355

Here is a simple solution using flex-box.

Hope this will help. Thanks :)

.row{
   display: flex;
}

.block {
    width: 250px;
    height: 400px;
    border: 3px solid red;
    box-sizing: border-box;
  }
  .block2 {
    width: 250px;
    height: 200px;
    border: 3px solid #73AD21;
    box-sizing: border-box;
  }
  .block3 {
    width: 250px;
    height: 200px;
    border: 3px solid blue;
    box-sizing: border-box;
    align-self: flex-end;
    margin-left: -250px; 
  }
<div class="container-fluid">
  <div class="row">
    <div class="col-4-md text-center block">
      <h2> Some Text </h2>
    </div>
    <div class="col-4-md text-center block2">
      <h2> Other Text </h2>
    </div>
    <div class="col-4-md text-center block3">
      <h2> More Text </h2>
    </div>
  </div>
</div>

Upvotes: 0

Rmj86
Rmj86

Reputation: 1150

Easiest way to sort this is to have the bigger div ont he let as is, and create a container Div for the two on the right. so the css would be somehting like this:

.block_on_the_left {
    float:left;
    width:50%;
}
#container_on_the_right {
    float:left;
    width:50%;
}
.block2 {
    width:100%;
}
.block3 {
    width:100%;
}

Your HTML would need to be:

<div class="block_on_the_left">
    some stuff here for the left bit
 </div>
 <div id="container_on_the_right">
        <div class=".block2">
            some stuff
        </div>
        <div class=".block3">
            some more stuff
        </div>
  </div>

The container will hold both the smaller divs inside it, and group them together.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115045

Flexbox can do that with a wrapper for the right side divs

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
div {
  border: 1px solid #73AD21;
}
.block {
  height: 200px;
}
.row > div {
  flex: 1;
}
.col-wrap {
  display: flex;
  flex-direction: column;
}
.col-wrap > div {
  flex: 1;
}
<div class="container-fluid">

  <div class="row">
    <div class="col-4-md text-center block">
      <h2> Some Text </h2>
    </div>
    <div class="col-wrap">
      <div class="col-4-md text-center block2">
        <h2> Other Text </h2>
      </div>
      <div class="col-4-md text-center block3">
        <h2> More Text </h2>
      </div>
    </div>
  </div>


</div>

Upvotes: 2

Related Questions