Aligning Next To Each Other, Not Working

I have a problem with aligment of two li elements inside a div because in the next example HTML

Solution 1:

Add:

float: Left;

to the css class of the li elements of the menu (in this rule):

".menu-left ul li {"

After the "width: 50%"

The float property specifies whether or not a box (an element) should float. See http://www.w3schools.com/cssref/pr_class_float.asp

Solution 2:

This is purely to do with the fact that your width specification is more than you've allowed for the child element in relation to it's parent elements:

.menu-leftulli {
    display:inline-block;
    vertical-align: top;
    width: 50%; // should be less than 50%
}

Updated fiddle: http://jsfiddle.net/KhLhR/3/

Solution 3:

http://jsfiddle.net/Soldier/KhLhR/1/

.menu-leftulli {
    display:inline-block;
    float:left;
    vertical-align: top;
    width: 50%;
}

Solution 4:

Add a left float to your li elements:

.menu-leftulli {
    display:inline-block;
    vertical-align: top;
    width: 50%;
    float: left;
}

Share