How to make the nav block align on the right side of the header block?

<div class="header"> <img src="images/logo-01.png" id="logo" width="200" height="75"> <div id="nav"> <span class="navclass">How It Works</span> <span class="navclass">Feature Tour</span> <span class="navclass">Get Started</span> <span class="navclass">Plugins</span> <span class="navclass">Developers</span> <span class="navclass">Blog</span> <span class="navclass">Support</span> </div> </div>

2 answers 2

I like the more option to do this:

  #header{ position: relative} #nav{ position: absolute; right:0px}

It is simply by experience that it works more stable and faster. And yes, you need to set the parent height, but in your case it already exists.

You can, of course, use # {float: right}, but then a special effect may appear: the width #header will be equal to the maximum height of the sons who have no flow around (float). To do this, after #nav, you need to add an element with the property: clear: both

By the way, in the layout it is customary to write ul instead of div # nav. And instead of span li. And you need to fix indents. This is considered more semantic.

     #nav{ float:right }

    Not an option?

    • one
      Understand which side the block should be aligned. On the right or left? - ka5itoshka
    • and if there were no logo, the lower blocks will begin to flow around the nav. What other options are there? - chelovechki
    • four
      and what prevents the lower blocks to prescribe float: none and clear: both? - mazanax