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

Question

I am learning how to vertically align element and found one 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 we need #floater to be floated? Deleting float:left and clear: both still works. What's the benefit of making it floated?

I know there are lots of ways to vertically align element, and seems each of them have some disadvantage like you need to know the height; old IE won't work; multiple lines won't work and so on. But for this approach it put one element to fill up the entire upper half of the parent element. I just wonder why this element need to be floater?

that is not a proper way to solve the vertical alignment issue. I've added a DEMO and highlighted the div using border, have a look at the DEMO and now you will understand the problem. http://jsbin.com/yogudafa/1/edit — Kheema Pandey, Jun 20 '14 at 06:13
Possibly, it's a confusion over vertical margins. For example, if #child was a `p` element instead of a `div`, the `p` element's default top margin would push the child element down if float and clear weren't used. But that's a bit speculative. — Alohci, Jun 20 '14 at 07:07

score 0 · Answer 1 · edited May 23 '17 at 12:21

This might not be the best approach to vertically align elements.

For float:left, A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. But in this case since there are no other elements in the document the floater div will start from left even without float:left

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

Elements after the floating element will flow around it. To avoid this, we use the clear property.The clear property specifies which sides of an element other floating elements are not allowed.

This makes sure that the child element is not on either left or right of div, but clearing it does not make any changes, you are right, it might though in some cases.

This approach is though very restrictive as you have to know the hieght of child elements and also if there are more elements inside the parent div this will not work.

For much better methods of vertical alignment refer this question

I know there are lots of ways to vertically align element, and seems each of them have some disadvantage like you need to know the height; old IE won't work; multiple lines won't work and so on. But for this approach it put one element to fill up the entire upper half of the parent element. I just wonder why this element need to be floater? — ItsJack, Jun 20 '14 at 06:40
I dont think its necessary. Its used Just to make sure it fills the parent div from left to right, `float:left` and `width:100%`, and the upper half of div in height. Although there is nothing more inside your parent div and even without float:left it works fine. And i tried to add elements inside `parentdiv` but then itgets messy and does not work at all. — Mustafa sabir, Jun 20 '14 at 06:56

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

1 Answers1