Three DIVs, two are closely, one is left-shifted - html

Question

Have a structure:
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
How can I make div3 floating left to div2, and then make a left shift on div2?

Answer 1

Try This:
#div1 {
float: left;
width: 200px;
height: 30px;
border: 5px solid #ccc;
margin: 5px;
padding: 2px;
text-align: center;
}
#div2 {
float: right;
width: 80px;
text-align: center;
border: 5px solid #000;
}
#div3 {
float: left;
width: 200px;
height: 30px;
border: 5px solid red;
margin: 5px;
padding: 2px;
text-align: center;
}
<div id="div1">
div 1
<div id="div2">div 2</div>
</div>
<div id="div3">div 3</div>
Here is jsfiddle : https://jsfiddle.net/nmsptskp/

Answer 2

Use display:inline-block on all 3 div & float:right on div2
#div1 {
border: 1px solid #f00;
height: 20px;
width: 100px;
display:inline-block;
}
#div2 {
float: right;
border: 1px solid #0f0;
height: 20px;
width: 50px;
display:inline-block;
}
#div3 {
border: 1px solid #00f;
height: 20px;
width: 50px;
display:inline-block;
}
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>

Answer 3

My answer is using flexbox css
.container{
display: flex;
}
#div1{
flex-grow: 1;
border:5px solid #ccc;
text-align:center;
display: flex;
justify-content: space-between;
flex-direction: col;
}
#div2{
width: 50%;
text-align:center;
border:5px solid #000;
self-
}
#div3{
flex-grow: 1;
border:5px solid red;
text-align:center;
}
<div class="container">
<div id="div1">
div 1
<div id="div2"> div 2</div>
</div>
<div id="div3"> div 3</div>
</div>

Answer 4

Use float left and right
<style>
#div1{width:300px;height:50px;background:green;margin:10px;float:left;}
#div2{width:100px;height:50px;background:red;float:right;opacity:0.7}
#div3{width:100px;height:50px;background:yellow;margin:10px;float:left;}
</style>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>