Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does wrapping div not expand around floating elements?

Tags:

css

css-float

I have two columns in a center column. (They are all div tags.) When I set the inner divs to float:left, the outer div does not wrap around the inner divs.

Why, and how do I fix that?

like image 223
Moshe Avatar asked Oct 24 '10 22:10

Moshe


People also ask

How do I float a div inside a div?

Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.

How do you keep a floated element from wrapping?

Use "overflow: hidden" to avoid floating elements from wrapping a container's text. Unfortunately, any content of the content 's text will wrap underneath it: ![

What causes container collapse CSS?

This happens because elements with float property are removed from the document flow so the sizes stay unknown for the parent element (as nothing is contained in it) so it is set to 0 .


1 Answers

set overflow: auto on the outer div.

Why does setting overflow alter layout of child elements?

like image 156
Brad Mace Avatar answered Sep 17 '22 15:09

Brad Mace