Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

Why are my floats not working?

I have a site here:

http://rentawebguy.net/sm/

and I have created two floats #logo and #meter at the end of my stylesheet.

#logo is suppose to float to the right and #meter to the left.

Neither is working.

Any help would be appreicated.
0
Donnie Walker
Asked:
Donnie Walker
  • 4
  • 3
  • 2
  • +1
1 Solution
 
EMB01Commented:
You should float them both left.  Then, put blank div in like this to clear the floats:

<div style="clear: both">
</div>

Open in new window

Put that just before your navigation menu.
0
 
Julian HansenCommented:
You can certainly float the logo left and meter right but to make it work you have to size your div's or else they will default to the width of the page. Make the width: auto and then float left and right as shown with the inline styles below.
Finally put a style of clear:both into your id="clear" div to clear the float.
  <div id="logo" style="width: auto; float: left">
    <a title="Home" href="http://rentawebguy.net/sm"><img alt="Sick Minds Think Alike Studios" src="http://www.rentawebguy.net/sm/wp-content/themes/dark-n-gritty/images/logo.png"></a>
  </div>
   <div id="meter" style="width: auto; float: right;"><img src="http://www.rentawebguy.net/sm/wp-content/themes/dark-n-gritty/images/meter.gif"></div>
   <div id="clear" style="clear: both"></div>

Open in new window

0
 
Donnie WalkerAuthor Commented:
Floating them both to the left does not seem to work either.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Donnie WalkerAuthor Commented:
And using width: auto; is not working.

I didn't use it inline though.
0
 
EMB01Commented:
I have tested and it works, is this not what you want http://postimage.org/image/au0hyvqip/
?

Just float the meter div left.
0
 
Donnie WalkerAuthor Commented:
I actually want that reversed. But when I float them both left like you suggest they are both on top of each other in Firefox. I didn't look at other browsers yet.
0
 
Julian HansenCommented:
The changes I posted do work - can you make the changes as requested so we can see them on the live site.

Also what browser are you using.
0
 
Donnie WalkerAuthor Commented:
julianH,

 That works. Any idea why it only does inline?
0
 
Julian HansenCommented:
It depends on where you add it to your style sheet - there might be a declaration tha comes after it that superscedes it

Or - it may be that your browser has cached the CSS file and it has not loaded the new settings.

It should work as a style setting - if you have Chrome or FF with Firebug you will be able to use the inspect element feature to see what styles are being applied to the element.
0
 
Kyle HamiltonData ScientistCommented:
the meter needs to come before the logo in the html if you want it on the left. then float the meter left,  float the logo right, and remove the widths.

<div id="meter2" style=" float: left;"><img src="http://www.rentawebguy.net/sm/wp-content/themes/dark-n-gritty/images/meter.gif"></div>

<div id="logo2" style=" float: right;">
    <a title="Home" href="http://rentawebguy.net/sm"><img alt="Sick Minds Think Alike Studios" src="http://www.rentawebguy.net/sm/wp-content/themes/dark-n-gritty/images/logo.png"></a>
  </div>

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now