I need help arranging div positions - html

Question

Example: https://jsfiddle.net/La9jd2y7/
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 25px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
I need div 3 to go below div 2, so the left of div 4 pushed up against 2 and 3.
Result: http://i.imgur.com/N8VZ4HO.png
Thanks.

Answer 1

Try this:
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 50px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.two >div {
height: 25px;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
<div class="one">1</div>
<div class="two">
<div>2</div>
<div>3</div>
</div>
<div class="four">4</div>
So, as you notice I've changed the HTML to place the 2 and 3 inside the .two. That way you have 3 columns, and 2 and 3 are inside the middle column. No need for 4 columns.

Answer 2

Here is Demo
HTML:
<div class="one">1</div>
<div class="box">
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="four">4</div>
CSS:
.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 25px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
.box{
float: left;
width:25px
}
https://jsfiddle.net/La9jd2y7/3/

Answer 3

Try this:
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
margin-top: 25px;
margin-left: -25px;
}
DEMO

Answer 4

.one {
height: 50px;
width: 200px;
background-color: #F60;
float: left;
text-align: center;
}
.two {
height: 25px;
width: 25px;
background-color: #6F0;
float: left;
text-align: center;
}
.three {
height: 25px;
width: 25px;
background-color: #F20;
float: left;
text-align: center;
}
.four {
height: 50px;
width: 200px;
background-color: #C90;
float: left;
text-align: center;
}
.two+.three{
margin-top: 25px;
margin-left: -25px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>