Kevin Aartsen Kevin Aartsen - 6 months ago 7
CSS Question

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.

Answer

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/

Comments