CODEWITHSUNDEEP
htmlcss
k4kuz0
k4kuz0

Reputation: 1045

Why is my div being pushed out of its container div?

Here is my JSFiddle. (may need to scroll right on the output to see my missing element).

There seems to be an issue which makes my logout div be pushed out of its container div before. I've had this kind of issue happen before and I'm not sure what causes it. I have tried removing each element header title and the <ul>, but it seems that it keeps being pushed out of what its contained in.

What's going on here? What am I missing?

Upvotes: 0

Views: 1912

Answers (2)

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Add this CSS to object ul

ul li are block elementes and its take 100% width by default. So u need to set width and float to the elememt

.objects ul{ 
    padding-top: 10px;
    margin-left: 100px;
    diplay:inline-block;
    float:left;

}

Here is the demo

Upvotes: 0

Michael Low
Michael Low

Reputation: 24506

The logout div escapes its container div because it's floated right, and float takes an element out of the normal document flow. You can force the parent to contain it by adding overflow:auto

http://jsfiddle.net/7S8cu/2/

This kind of layout is generally often handled by using grids nowadays, such as Bootstrap or Foundation grids, which take care of the basic layout code for you.

Upvotes: 2

Related Questions