Are width and float incompatible?

[tirengarfio]

Hi,

I have this site: http://www.ziiweb.com/

As you can see the navbar is 41% width and float: right, but to make the float: right work, I have to remove the width: 41%, why? is there any incompatibility between the width and float?

  <header class="tab-content cabecera">
  <a class="logo pull-left" href="/">
    <img src="images/logo1.png" width="250px" alt="ziiweb"/>
  </a>
  <div class="social">
    <div class="fb-like" data-href="http://www.facebook.com/!!!" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
    <g:plusone align="middle"></g:plusone>
  </div>
  <nav>
  <ul class="nav nav-pills">
    <li class="active"><a href="#">Inicio</a></li>
    <li><a href="#">Qué ofrecemos</a></li>
    <li><a href="#">Trabajos</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
  </nav>

a.logo {
  vertical-align: top;
  width: 37%;
}
.social {
  display: inline-block;
  width: 21%;
}
nav {
  display: inline-block;
  float: right;
  width: 41%;
}

Im using FF 22

[Paulie_D]

but to make the float: right work, I have to remove the width: 41%

What do you mean by work “right”?…it looks like it’s working to me.

Perhaps you meant to float the ‘ul’ right?

[tirengarfio]

What do you mean by work “right”?…it looks like it’s working to me.

I mean “but to make the ‘float: right’ work”.

As I say in my post, for me it does not work (it doesn’t float the menu on the right) when I define a width.

If you’re floating then why use inline-block?

Yes, you are right, I can remove ‘inline-block’.

[tirengarfio]

It is on the left for me (not floating). Only if I remove width: 41%, it floats on the right.

[tirengarfio]

Try to toggle width: 41%. Is it moving for you when you toggle? For me yes.

[Paulie_D]

As I say in my post, for me it does not work (it doesn’t float the menu on the right) when I define a width.

When I checked you were floating the nav that wraps the menu..not the menu itself.

The ul (menu) is not as wide as the nav so it’s sits on the left of it until told not to.

[Author]

Posts