Problem Styling absolutely positioned UL

HTML & CSS
1

Hello all,

I can’t believe I’m having difficulty with this little bit of CSS, but it just doesn’t seem to want to cooperate with me…

I just added a div with the id of “subNav.” Within this div, I have an unordered list, which I am using for my subnavigation menu. I need to get each of these list items to 300px width and 35px height, but no matter what I try I can’t seem to force these dimensions.

Here’s a link to a sample page on the site.

Any suggestions?

Thanks in advance!

2 
#subNav li {float:left; width:300px; display: inline; background: red; }
3

That worked, although I’d still like the option to keep the ul (which is 900px) centered. Is that possible?

4

Just give hte <ul> margin:0 auto;

Unless it is a dropdown (if it is, use the clearfix (google it if yuou need it)), just give the <ul> overflow:hidden; as well :slight_smile:

5

Hi Ryan,

Unfortunately I wasn’t able to center the list using ‘margin: 0 auto.’ That was the first thing I tried, and I believed it would work since I assigned the 900px width to the ul. Also, it’s a simple list of three items, with no drop down at all.

Any other ideas?

6

Hi, on “.footer ul” you give float:left; whicih doesn’t allow the <ul> to center via auto margins.

If you still need that float:left; rule there, just set float:none; for “#subNav ul” :slight_smile:

7

Thanks again, Ryan - that did the trick!

Also, big thanks to BPartch for the initial help :slight_smile:

8

We are glad to help :). You’re welcome.

9

:agree: