How can I position center1 directly below center3 using css - css

Question

I am unable to position #center3 directly below #center1. I have tried floating right and it didn't work, I have also tried using the relative positioning but it not also working either.
I have been searching for help on this topic on the Internet for a wile now without any luck. I have also spent some time to see if I can figure it out by my self but it turn out to be too difficult for me.
HTML
<section>
<article></article>
<aside></aside>
<aside id="center1"></aside>
<aside id="center2"></aside>
<aside id="center3"></aside>
</section>
CSS
section {
margin:0px auto;
width:960px;
}
article {
width:960px;t turned out to be
height:100px;
border:1px solid #333;
}
aside {
width:250px;
height:1000px;
border:1px solid #333;
margin-top:5px;
margin-right:5px;
float:left;
}
#center1 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
}
#center2 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
}
#center3 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
}

Answer 1

http://jsfiddle.net/paZB6/1/
(edit with new fiddle: I added to .right-column a 1px blue border so you can easily visually see what it is doing)
You need to add a clear to #center3 first of all in order to bypass the floats above it.
Further than that however, to keep it from also clearing your aside, you need to wrap the right side elements in a containing element so as to separate those boxes from the aside.
What I have done is to create two columns, your aside, plus whatever remains to the right of it, then your #center1,2,3 boxes are contained inside the box to the right of aside. Note that you can add width and whatever else to right-column as needed, I have only provided the base functionality.
Note that I also changed your HTML <section> that was wrapping everything. Instead of targeting it in css as section (not best practice for what you are doing), I gave it a class called wrapper and applied your styles to it via the class name.
HTML:
<section class="wrapper">
<article>
<p>Some text</p>
</article>
<aside>
</aside>
<section class="right-container">
<aside id="center1">
</aside>
<aside id="center2">
</aside>
<aside id="center3">
</aside>
</section><!-- END RIGHT CONTAINER -->
</section>
CSS:
.wrapper {
margin:0px auto;
width:960px;
}
article {
width:960px;t turned out to be
height:100px;
border:1px solid #333;
}
aside {
width:250px;
height:1000px;
border:1px solid #333;
margin-top:5px;
margin-right:5px;
float:left;
}
.right-container {
float: left;
}
#center1 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
}
#center2 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
}
#center3 {
width:200px;
height:300px;
border:1px solid #333;
margin-top:5px;
float:left;
clear: both;
}

Answer 2

Try to add clear:left; to #center3