css vertical align using Floater Div. what's the benefit of using floater? -

css vertical align using Floater Div. what's the benefit of using floater? -

i learning how vertically align element , found 1 approach(floater div) here: http://www.vanseodesign.com/css/vertical-centering/

**html** <div id="parent"> <div id="floater"></div> <div id="child">content here</div> </div> **css** #parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }

why need #floater floated? deleting float:left , clear: both still works. what's benefit of making floated?

i know there lots of ways vertically align element, , seems each of them have disadvantage need know height; old ie won't work; multiple lines won't work , on. approach set 1 element fill entire upper half of parent element. wonder why element need floater?

this might not best approach vertically align elements.

for float:left, floated element move far left or right can. means way left or right of containing element. in case since there no other elements in document floater div start left without float:left

the clear property specifies side(s) of element other floating elements not allowed. clear: both - no floating elements allowed on either left or right side

elements after floating element flow around it. avoid this, utilize clear property.the clear property specifies sides of element other floating elements not allowed.

this makes sure kid element not on either left or right of div, clearing not create changes, right, might though in cases.

this approach though restrictive have know hieght of kid elements , if there more elements within parent div not work.

for much improve methods of vertical alignment refer question

css