Question

To Put it simple, I would like a header with two elements floating to each side and vertically centered:

I started out with doing this with non-floating elements and managed to make this example.

But once I add the float:left or float:right the vertical centering is lost (I understand why, because it’s not part of the flow anymore)

I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.

Thanks in Advance!

Answer 1

Vertical centering can be painful, especially when you are not dealing with inline elements. In this case, I would recommend taking advantage of display:table-cell.

HTML

       <div id="wrapper">
            <div class="cell">
                <div class="content">
                    Content Goes here
                </div>
            </div>
            <div class="cell">
                <div class="content2">
                    <div class="redbox">
                    </div>
                </div>
            </div>
        </div>

CSS

            #wrapper {
                color: white;
                display: table;
                border: 1px solid darkblue;
                background: blue;
                width: 100%;
            }

            .cell {
                display: table-cell;
                vertical-align: middle;
                height: 200px;
            }

            .content {
                float: left;
            }

            .content2{
                float: right;
            }

            .redbox {
                border: 2px solid darkred;
                background: red;
                height: 75px;
                width: 75px;
            }

Example: http://jsfiddle.net/YBAfF/