How to force div element to keep its contents inside container

Question

I am making a css menu. For this I am using a ul. When I make li float left then all li's gets outside of the ul. I mean the height of ul become zero. How can I make li display inside ul after giving float left.

One way to do is to make a div tag with some common class and add clear: both to it in css but I do not want this.

How can I solve this?

Nathanael · Accepted Answer · 2012-06-27T05:43:30.250

30

Just add overflow: auto; to the <ul>. That will make it so that the text doesn't leak outside of the UL.

See: http://jsfiddle.net/6cKAG/

However, depending on what you're doing, it might be easier to just make the <li> display: inline;. It totally depends on what you're doing!

See: http://jsfiddle.net/k7Wqx/

edited Jun 27 '12 at 05:43

answered Jun 27 '12 at 05:36

Nathanael

6,893
5
33
54

sandeep · Answer 2 · 2012-06-27T05:35:17.147

11

If you define float to your child then you have to clear your parent. Write overflow:hidden to your UL.

ul{
 overflow:hidden;
}

OR You can also use clearfix method for this:

ul:after{
 content:'';
 clear:both;
 display:block;
}

Read this http://css-tricks.com/snippets/css/clear-fix/

edited Jun 27 '12 at 05:35

answered Jun 27 '12 at 05:30

sandeep

91,313
23
137
155

Who give me a downvote please explain the reason. what's wrong in my answer thanks :) – sandeep Jun 27 '12 at 05:34
I believe it's also recommended to add `zoom:1` to the first ruleset for IE - otherwise, it's `overflow` misbehaves in versions < IE9 (also curious about the down-vote). – Tieson T. Jun 27 '12 at 05:49
1

@TiesonT. :after work till IE8 & OP define css3 in his question which means. He want to support modern browsers – sandeep Jun 27 '12 at 05:56
Or he just got carried away with his tags, since he's not really doing anything CSS3-specific. Still, you are correct, good sir (hence my up-vote). :) – Tieson T. Jun 27 '12 at 06:01
The clearfix method is the best approach when your `overflow:hidden` is actually hiding contents instead. – Peter Feb 13 '17 at 16:57

score 4 · Answer 3 · answered Sep 02 '17 at 09:40

4

If you want the overflowing text in the div to automatically newline instead of being hidden or making a scrollbar, use the

word-wrap: break-word

property.

answered Sep 02 '17 at 09:40

Rahi.Shah

1,305
11
20

score 0 · Answer 4 · edited May 23 '17 at 12:34

0

This happens when floated elements (menu items) are positioned inside a non-floating container (ul).

This could either be fixed by floating the container as well (rarely acceptable), or applying a clearfix which addresses exactly this issue.

edited May 23 '17 at 12:34

Community

1
1

answered Jun 27 '12 at 05:34

Oleg

24,465
8
61
91

How to force div element to keep its contents inside container

4 Answers4

Linked