Float Probem?

HTML & CSS
1

I’m having an issue with some mock code I’m working on for a site for my client. I’m trying to get an element to display properly under another one. You can see my css code and design here:

http://groq.delachi.com/css-test/csstest.html

What I’m trying to do is get the <div id=‘navi-bar’> to sit right up under <div id=‘toolname’>. The ‘navi-bar’ div has an green border-bottom, but for some reason the border bottom shows right up under the ‘toolname’ div. Any ideas what I’m doing wrong?

Thanks in advance,

Delamatrix

2

Hi, the parents have collapsed because the <li> are floated. They make hte parent collapse because it doesn’t contain the floats. Make it do so :slight_smile:

.navi-bar ul{overflow:hidden;}

If you are doing a dropdown, use the clearfix instead :).

3

Thanks Ryan! Now the only problem is that my drop down sub menu seems to be trapped inside the div.

-Delamatrix

4

Read the lsat line of my post ;).
Remove overflow:hidden; and set class=“clearfix” on the <ul> (the top level one, not any others)

Then add the CSs from this

5

Thanks again Ryan. I totally read right over that, sorry for being a bonehead. Yep, the clearfix worked. I appreciate your quick response and help.

-Delamatrix

6

You’re welcome :). Any more questions just shout :p.

Off Topic:

Don’t worry about reading over it, trust me, I’ve dealt with much worse (not that you were bad) since I’ve joined here :wink: