CODEWITHSUNDEEP
htmlcsscss-float
Davey
Davey

Reputation: 1324

css positioning

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_data/wildfirewp/

Upvotes: 0

Views: 158

Answers (7)

tahdhaze09
tahdhaze09

Reputation: 2213

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>

Upvotes: 1

John Czajka
John Czajka

Reputation: 183

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.

:)

Upvotes: 1

Sqoo
Sqoo

Reputation: 5243

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

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

Upvotes: 1

Adhip Gupta
Adhip Gupta

Reputation: 7173

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

Upvotes: 1

Chandra Patni
Chandra Patni

Reputation: 17587

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;
}

Upvotes: 1

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124888

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.

Upvotes: 4

Ray
Ray

Reputation: 21905

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.

Upvotes: 1

Related Questions