CODEWITHSUNDEEP
htmlcsspositioncss-float
XstreamINsanity
XstreamINsanity

Reputation: 4296

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

Upvotes: 0

Views: 492

Answers (5)

avetarman
avetarman

Reputation: 1252

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

Upvotes: 0

Samir Adel
Samir Adel

Reputation: 2499

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>

Upvotes: 2

SeanCannon
SeanCannon

Reputation: 77966

You need to clear your floats.

Add this to .bs20b: 

 overflow:hidden;

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

Upvotes: 1

Kumar
Kumar

Reputation: 5147

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

Upvotes: 0

Rob
Rob

Reputation: 15160

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.

Upvotes: 0

Related Questions