HTML Positioning using CSS - html

Question

I'm having trouble with HTML positioning. I messed around for a while and this was the farthest I got. Here is the HTML and CSS
.group:after {
content: "";
display: block;
clear: both;
}
article {
width: 400px;
border: 1px solid black;
}
#tip,
#title {
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#tip {
background: yellow;
}
#title {
background: orange;
}
#box_1 {
float: left;
width: 60px;
height: 60px;
background: pink;
}
#box_2 {
float: right;
width: 60px;
height: 120px;
background: blue;
}
#box_3 {
float: left;
clear: left;
width: 60px;
height: 60px;
background: green;
}
<article class="group">
<h2 id="tip">tip</h2>
<h2 id="title">title</h2>
<div id="box_1"></div>
<div id="box_3"></div>
<div id="box_2"></div>
</article>
I want my #box_3 to be right below #box_1 and I got it to work by giving #box_3 clear: left;. But I also want my #box_2 to be rendered right below #title on the right.
Something to note is that the #box_3 comes before #box_2 in my HTML code and the height of #box_1 is not fixed to just 60px. Here is my jsfiddle.
http://jsfiddle.net/92um5o2c/2/

Answer 1

if you suffle your html code little bit so its not a problem. You should place #box1 first then #box2 and then #box3
Here is the example
.group:after {
content: "";
display: block;
clear: both;
}
article {
width: 400px;
border: 1px solid black;
}
#tip, #title{
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#tip {
background: yellow;
}
#title {
background: orange;
}
#box_1 {
float: left;
width: 60px;
height: 60px;
background: pink;
}
#box_2 {
float: right;
width: 60px;
height: 120px;
background: blue;
}
#box_3 {
float: left;
clear: left;
width: 60px;
height: 60px;
background: green;
}
<article class="group">
<h2 id="tip">tip</h2>
<h2 id="title">title</h2>
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
</article>

Answer 2

Assuming the height of the boxes is fixed and will not grow, you can simply give #box_2 a negative margin which equals the height of box_1:
#box_2 {
float: right;
width: 60px;
height: 120px;
background: blue;
margin-top:-60px;
}
http://jsfiddle.net/92um5o2c/4/

Answer 3

You mean like this right? Just change the order in the HTML like below.
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
#box_1 {
float: left;
width: 60px;
height: 60px;
background: pink;
}
#box_2 {
float: right;
width: 60px;
height: 120px;
background: blue;
}
#box_3 {
clear: left;
width: 60px;
height: 60px;
background: green;
}
http://jsfiddle.net/xn0pL6mn/

Answer 4

You can add "position: absolute;" and "right: 0;" to #box_2 and then "position: relative;" to article.
#box_2 {
position:absolute;
right: 0;
}
article {
position: relative;
}
https://jsfiddle.net/92um5o2c/9/