Need help understanding "position" and "float" for css

For whatever reason, I cannot fully understand how position and float work together. I'm trying to make a simple test site for me to practice on. In the header I have one div for ads, one div for the site name and another div for the menu/navigation. Inside the div for the ads I have three other divs. I want the one of the left and the one on the right to be about 25% of the page, and the one in the middle to be about 45% of the page. I want them to be inline. However, when I'm able to get the ads inline, it unfortunately makes the other divs inline too (or at least the next div). Could someone provide me with a good explaination (link) to how position and float work. Here's my HTML and CSS.

<div class="header">
  <div class="bs20b br5">
    <div class="ad1 ads">
      Ad1
    </div>
    <div class="ad2 ads">
      Ad2
    </div>
    <div class="ad3 ads">
      Ad3
    </div>
 </div>
 <div class="sitename">
   CITISI
 </div>
  <div class="menu">开发者_如何学C
    MENU
  </div>
</div>

body
{
  background-color: #EEE;
}

.ads
{
 position: relative;
 float: left;
 border: 1px solid black;
}

.ad1
{
 text-align: center;
 width: 100px;
}

.ad2
{
 width: 200px;
}

.ad3
{
 width: 100px;
}

.bs20b
{
 -webkit-box-shadow: 0px 0px 20px black;
 -moz-box-shadow: 0px 0px 20px black;
 box-shadow: 0px 0px 20px black;
}

.br5
{
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.sitename
{
}

Any assistance is appreciated. Thanks.

EDIT I did find this site and Step 9 seems to be what I need. However, should I float anything without setting the position? Almost every example I've ever seen shows both being set.

http://www.barelyfitz.com/screencast/html-training/css/positioning/

when you set float for any element you need after that to add a div with clear:both style to let the browser know that you have eneded the floating and to start the next div in a new line

<div class="header">
  <div class="bs20b br5">
    <div class="ad1 ads">
      Ad1
    </div>
    <div class="ad2 ads">
      Ad2
    </div>
    <div class="ad3 ads">
      Ad3
    </div>
 </div>
    <div style="clear:both">
 <div class="sitename">
   CITISI
 </div>
  <div class="menu">
    MENU
  </div>
</div>

You need to clear your floats.

Add this to .bs20b:

 overflow:hidden;

http://jsfiddle.net/AlienWebguy/zbtNY/

Videos at these URLs are very helpful and does explain float and position specifically. http://code.google.com/edu/submissions/html-css-javascript/#css

I have not looked at your markup.

When you use both, float will place the element to the left or right, whichever you state. position:relative will then place the element relative to where float put it.

Forget any position property. It's useless in your example.

• Use the clear:both method mentioned here.
• Alternatively, you can just set overflow:hidden for the parent div, that includes floating divs.
• Another way is to use display:inline-block for the elements you want to be in one line