I want to put the two boxes under each other

user_19581979 0
Viewed 60

i want this result :
i want this result

and this is my HTML code:

<style>
  .blue_box {
    border: 10px solid blue;
    padding: 0.5em;
    width: 150px;
    float:right;
    height: 100px;
  }
  .red_box {
    border:15px solid red;
    padding : 1.3em;
    width:min-content;
    height:min-content;
    margin:1em;
  }
    
</style>

<div class="blue_box">Hooray, a box!</div>
<div class="red_box"></div>

to put the 2 boxes ander each other.

css html
3 Answers

You can use flexbox using align-items: flex-end with flex-direction: column

section {
  display: flex;
  flex-direction: column;
  align-items: flex-end
}

.blue_box {
  border: 10px solid blue;
  padding: 0.5em;
  width: 150px;
  height: 100px;
}

.red_box {
  border: 15px solid red;
  padding: 1.3em;
  width: min-content;
  height: min-content;
  margin: 1em 0 1em 1em;
}
<section>
  <div class="blue_box">blue</div>
  <div class="red_box">red</div>
</section>

user_34485270

You are almost there. You can clear any floated element by using:

clear: [left | right | both]

To create your desired output, you only need to add two styles to your .red_box:

  • float: right
  • clear: right

Working Example:

.blue_box {
  border: 10px solid blue;
  padding: 0.5em;
  width: 150px;
  float: right;
  height: 100px;
}

.red_box {
  float: right;
  clear: right;
  border: 15px solid red;
  padding: 1.3em;
  width: min-content;
  height: min-content;
  margin: 1em 0 1em 1em;
}
<div class="blue_box">Hooray, a box!</div>
<div class="red_box"></div>

Further Reading:

user_38977750

You can use position property.

<style>
  .blue_box {
    border: 10px solid blue;
    padding: 0.5em;
    width: 150px;
    /* float:right; */
    height: 100px;
  }
  
  .red_box {
    border: 15px solid red;
    padding: 1.3em;
    width: min-content;
    height: min-content;
    margin: 1em;
    position: fixed;
    left: 106px;
  }
</style>

<div class="blue_box">Hooray, a box!</div>
<div class="red_box"></div>

user_161538070
Related