3 divs with float: left > floating issues - html

Question

how can I display the given html structure while all divs has float: left ?
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

Answer 1

This is how i did it.
div {
margin: 10px;
overflow: auto;
display: inline;
clear: none;
float: left;
}
#container {
max-width: 390px;
display: block;
}
#d1 {
background: red;
width: 200px;
height: 100px;
}
#d2 {
background: blue;
width: 150px;
height: 150px;
float: right;
}
#d3 {
background: green;
width: 200px;
height: 150px;
}
<div id="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
Just needs the second element to be floated right within a container div.

Answer 2

I'm sorry this answer is vague, but it's only as vague as your question. An example of how this could be done is below:
#container {
float: left;
}
#d1 {
width: 200px;
height: 100px;
background: blue;
}
#d2 {
width: 200px;
height: 100px;
background: green;
}
#d3 {
width: 100px;
height: 200px;
background: red;
float: left;
}
<div id="container">
<div id="d1"></div>
<div id="d2"></div>
</div>
<div id="d3"></div>
I hope you get some inspiration . . .

Answer 3

You put a container div around div one and three
#container
{
width:80%;
float:left;
}
#three
{
width:20%;
float:left;
background-color:blue;
height:600px;
}
#one, #two
{
background-color:green;
margin:10px 10px;
height:300px;
}
<div id="container">
<div id="one">1</div>
<div id="two">2</div>
</div>
<div id="three">3</div>