For whatever reason, I cannot fully understand how position and float work together. I’m

Question

0

Asked: May 24, 20262026-05-24T06:38:20+00:00 2026-05-24T06:38:20+00:00

For whatever reason, I cannot fully understand how position and float work together. I’m

0

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">
    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/