CODEWITHSUNDEEP
htmlcss
Kevin
Kevin

Reputation: 928

Items in div not staying in position

I Created a menu div. In this div, I want to add a couple of list items and a logo on the left. But, for example, when I give the menu items a padding or a height, they go outside the menu div like shown in the js fiddle. The items should not go outside their parent.

Upvotes: 0

Views: 40

Answers (2)

le_m
le_m

Reputation: 20228

Remove the height:100px; from #menu to make it automatically expand to your list size. You could set a min-height instead. Also, give your list items more appropriate values for margin and line-height and add a float:left; to #logo if it should stay on the same horizontal axis as the list items.

Upvotes: 1

Ahmed Salama
Ahmed Salama

Reputation: 2825

You should use floated element instead of margin you given to the menu element 

#logo {
    height:50px;
    width:80px;
    background-color:red;
    float:left; // add this
}
#menu ul {
    // margin-left:70%; // remove this
    float:right; // add this
    position: relative;
    line-height: 100px;
}

https://jsfiddle.net/c6tp9zmx/1/

Upvotes: 1

Related Questions