CSS ul is affected from another ul

Question

I have been trying to create a menu which is divided into three parts:

• Left
• Middle
• Right

Then I did this:

JSFIDDLE

Now as you see, the left menu is affected from the middle menu, even though I did:

display:inline

I tried also to increase the navgroups class above then:

1000px

or alternatively to delete this line, but it doesn't change anything.

Thanks for helping!

In addition to what's written above, I wanted to try the middle-menu with an image instead of writing, then I just added this:

 <img src=".."> 

but the image goes too down and I would like to put it more upper.
Could someone please help me with this?

Thanks a lot for the supports, great forum!

Answer 1

You should float them all left, if you want them to all line up horizontally. Here's an update to your fiddle to demonstrate. ...

.navgroups {
    margin: 0 auto;
    display: table;
}
.navgroups li {
    display: inline;
    padding: 5px;
}
.navgroups .menuleft {
    padding:0px;
    float: left;
}
.navgroups .menumiddle {
    padding: 0px;
    float: left;
    text-align: center;
}
.navgroups .menuright {
    padding: 0px;
    float: left;
    text-align: right;
}

UPDATE: To accommodate the image you mention in your update, you could add a line-height on the text equal to the image height. I'm not sure exactly how you want them lined up, but that will let you adjust it. Here's a fiddle: http://jsfiddle.net/QE7Yd/7/

Answer 2

The ul (like divs) comes automatically with a display: block on it, meaning that it will take up the entire width of whatever container it is in. Were it me, I would make three containing divs for the uls which would handle the floating. Here is a Fiddle to help explain. All of the divs have a float left as I've never found it useful to mix different types of floats in that purpose.

.navgroups {
    margin: 0 auto;
}
.navgroups .menuleft {
    padding:0px;
    float: left;
}
.navgroups .menuright {
    padding: 0px;
    float: left;
}
.navgroups .menumiddle {
    padding: 0px;
    float: left;
    text-align: center;
}

Also, to remove the bullet points from the ul, add this to your css, which will prevent the images from moving down.

.navgroups li {
    list-style-type: none;
}

Answer 3

If you are still having trouble with centering, you can simply add another container around the .navgroups div.

Here's the CSS with fiddle: http://jsfiddle.net/QE7Yd/4/

.navwrap {
    text-align:center;
}

.navgroups {
    display:inline-block;
    background-color:#CC0000;
}

.navgroups:before,
.navgroups:after {
    display:table;
    content:'';
    clear:both;
}

.navgroups li {
    display: inline;
    padding: 5px;
}
.navgroups .menuleft {
    padding:0px;
    float: left;
}
.navgroups .menumiddle {
    padding: 0px;
    float: left;
}
.navgroups .menuright {
    padding: 0px;
    float: left;
}

Basically you are telling the .navgroups to be treated like and inline element and using the .navwrap to say the text inside should be centered.