css positioning

Question

Can't seem to figure out why my navbar isn't floating left. Been messing with it for a good hour now, not sure what happened. Any help would be greatly appreciated.

http://ithacawebdesigners.com/temp%5Fdata/wildfirewp/

Answer 1

It is floating left - it is positioned right after the logo. Since there is room for it in your browser window, it sits right next to the logo. Shrink your browser window and it will drop down.

I don't think you need to float this thing - take the float out and it will sit on the left side below the logo.

Answer 2

Decrese the top margin of #lamp and remove the floats from #header and #lamp. Then it will flow under the header. Don't use floats when you don't need them.

Answer 3

It's because your header is also floated. If you want it to the left, then you will need to clear float. Add this after header, before nav.

<div class="clear"></div>

Once you do that, your nav has a gap which you can fix by adjusting the #lava margins.

#lamp {
margin:25px 0 0;
}

Answer 4

Add clear:left to #lamp and remove the top margin.

Answer 5

lamp is floated left of header, add a clear: both to it :)

[edit] ... or take out the floats, you dont need therm

Answer 6

Don't use clear both or float left or any of that other jibberish.

You want to use on your .lavalamp class

position:absolute; top:100px; right:0px;

Make sure you remove relative positioning on your .lavalamp class. Adjust the top and right as necessary. You may just want to specify a left:0px;

Add position:relative to your #wrapper div.

That should do it bro.

:)

Answer 7

You don't need the float. Position your menu before the image in code. Remove the floats. Give your header container enough room to fit both the menu and the image and they should flow, with the menu on the left and the image on the right.

Also, the nesting on the menu looks off:

<ul class="lavaLamp">
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Links</a></li>
            <li class="back"><div class="left"></div></li>

        <li style="left: 15px; width: 65px; display: list-item;" class="back"><div class="left"></div></li></ul>