How do I get my box 3 to align to the right of box 2?

Question

I am trying to get my "this is box 3" to align to the right of "this is box 2" all inside the parent container. Box 3 and Box 2 should overlap and be next to each other? I have tried to use "display: inline; however that does not do anything. Any advice would be appreciated?

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }.container { width: 300px; height: 600px; border: 5px solid black; padding: 20px; margin: 0 auto; }.box1 { height: 50%; width: 90%; border: 1px solid black; padding-top: 10px; margin: 0 auto; text-align: center; }.box2 { height: 50%; width: 50%; border: 1px solid blue; text-align: center; margin-top: 10px; }.box3 { height: 50%; width: 50%; text-align: center; border: 1px solid red; float: right; }

 <div class="container"> <div class="box1"> this is box 1 </div> <div class="box2"> this is box 2 </div> <div class="box3"> this is box 3 </div> </div>

Answer 1

Add float: left to .box2 and marign-top: 10px to .box3 :

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }.container { width: 300px; height: 600px; border: 5px solid black; padding: 20px; margin: 0 auto; }.box1 { height: 50%; width: 90%; border: 1px solid black; padding-top: 10px; margin: 0 auto; text-align: center; }.box2 { height: 50%; width: 50%; border: 1px solid blue; text-align: center; margin-top: 10px; float: left; }.box3 { height: 50%; width: 50%; text-align: center; border: 1px solid red; float: right; margin-top: 10px; }

 <div class="container"> <div class="box1"> this is box 1 </div> <div class="box2"> this is box 2 </div> <div class="box3"> this is box 3 </div> </div>

Answer 2

You can use display: flex with flex-wrap: wrap on the .container :

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }.container { display: flex; flex-wrap: wrap; justify-content: center; width: 300px; height: 600px; border: 5px solid black; padding: 20px; margin: 0 auto; text-align: center; }.box1 { height: 50%; width: 90%; border: 1px solid black; margin-bottom: 10px; padding-top: 10px; }.box2, .box3 { height: 50%; width: 50%; }.box2 { border: 1px solid blue; }.box3 { border: 1px solid red; }

 <div class="container"> <div class="box1"> this is box 1 </div> <div class="box2"> this is box 2 </div> <div class="box3"> this is box 3 </div> </div>

Answer 3

You can use this code

 body { margin: 0; padding: 0; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }.container { width: 300px; height: 600px; border: 5px solid black; padding: 20px; margin: 0 auto; }.box1 { height: 50%; width:100%; border: 1px solid black; padding-top: 10px; margin: 0 auto; text-align: center; }.box2 { height: 50%; width: 50%; border: 1px solid blue; text-align: center; float: left; }.box3 { height: 50%; width: 50%; text-align: center; border: 1px solid red; float: right; }

 <div class="container"> <div class="box1"> this is box 1 </div> <div class="box2"> this is box 2 </div> <div class="box3"> this is box 3 </div> </div>