Clever Geek Handbook

Why does container div not wrap child divs (which overflow container)

I am trying to put a title and description in a div that will wrap them. I have a <div class="category_border">

wrapped title and description, but they fall out of it for some reason. I created a violin to show what it does. Why don't they get in <div class="category_border">

?

https://jsfiddle.net/0vkzoxm3/

0


source to share


1 answer


Add overflow: auto

to class .category_border

.

Here's your updated demo:
https://jsfiddle.net/0vkzoxm3/3/

The reason your title and description overflow contains div

is because both styles have float: left

. When you float an element, it is pulled out of the normal flow. Hence, as far as the container is concerned div

, they do not exist.

The answer lies in "cleaning" the floats. There are many ways to do this. One way is to add overflow: auto

to the container. This causes the container to expand to the height of the floated elements.



Here's a bit more if you're interested:

Cleaning floats: an overview of the different clearfix methods

How floats are placed

Good luck!

+1


source






More articles:


All Articles