How to align divs horizontally which represents a table row

Problem

I have a header in my web page where logo, application name, help link and logout are shown. Logo is placed left top, logout is placed right top, help is placed before logout link. The rest of the space should be occupied by the application name. I tried to float all the divs and then my divs lost width and when I try to set width on my app name div I get unexpected results when I try to set width: 100%. Even I dont set the width to 100% if the application name text increases I get unexpected results.

This is the code

<!DOCTYPE html>
<html>
    <head>
        <title>Mock UI</title>
        <style>
        body {
            margin: 0px;
        }
        .oss-gradient {
            height: 5px;
            min-width: 1024px;
            background: yellow;
        }
        .header {
            height: 40px;
            min-width: 1024px;
            background: #def;
        }
        .logo {
            background-image: url("logo_top_small.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: scroll;
            width: 50px;
            height: 100%;
            float: left;
        }
        .product-name {
            line-height: 35px;
            height: 100%;
            float: left;
            width: 100%;
        }
        .help {
            line-height: 35px;
            float: right;
            height: 100%;
        }
        .logout {
            line-height: 35px;
            float: right;
            height: 100%;
        }
        .content-wrapper {
            width: 1024px;
            background: #defabc;
            margin: 0px auto;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="oss-gradient">
            </div>
            <div class="header">
                <div class="logo">
                </div>
                <div class="product-name">
                    App name
                </div>
                <div class="logout">
                    <a href="#">Logout</a>
                </div>
                <div class="help">
                    <a href="#">Help</a>
                </div>
            </div>
            <div class="content-wrapper">
            </div>
        </div>
    </body>
</html>

Here is a working sample.

I then tried doing the same with CSS3 calc method. But this involves hard coding the widths. A small change in logo's width or logout, help divs widths will create problems in the app name div.

Click here to see the working example with css3 calc

Then I tried to do it using float with inner divs. Below is my new code

<!DOCTYPE html>
<html>
    <head>
        <title>Mock UI</title>
        <style>
        body {
            margin: 0px;
        }
        .oss-gradient {
            height: 5px;
            min-width: 1024px;
            background: yellow;
        }
        .header {
            height: 40px;
            min-width: 1024px;
            background: #def;
        }
        .logo {
            background-image: url("logo_top_small.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: scroll;
            width: 50px;
            height: 100%;
            float: left;
        }
        .wrapper {
            height: 100%;
        }
        .product-name {
            line-height: 35px;
            height: 100%;
            float: left;
        }
        .help {
            line-height: 35px;
            float: right;
            height: 100%;
            margin-right: 10px;
        }
        .logout {
            line-height: 35px;
            float: right;
            height: 100%;
            margin-right: 10px;
        }
        .oss-text {
            line-height: 35px;
            height: 100%;
            overflow: hidden;
        }
        .content-wrapper {
            width: 1024px;
            background: #defabc;
            margin: 0px auto;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="oss-gradient">
            </div>
            <div class="header">
                <div class="logo">
                </div>
                <div class="wrapper">
                    <div class="logout">
                        <a href="#">Logout</a>
                    </div>
                    <div class="wrapper">
                        <div class="help">
                            <a href="#">Help</a>
                        </div>
                        <div class="oss-text">
                            App name
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-wrapper">
            </div>
        </div>
    </body>
</html>

Click here to see the working example.

But this is creating lot of dom. Is there any other approach or the second solution is good enough?

The first solution is a total flop. If I use CSS3 then I have to hardcode the widths Solution 2 involves making the dom deeper.

I think there is another solution which involves using absolute positioning. But I dont know how to do it and is it a good approach or not.

Problem courtesy of: Krishna Chaitanya

Solution

You can achieve what you want using display:table and display:table-cell:

.header {display:table}
.header > div {display:table-cell}

As long as you give widths to logo, logout and help divs then the app name should stretch to take up the rest of the header

Example

Solution courtesy of: Pete

Discussion

Try this:

.product-name {
    line-height: 35px;
    height: 100%;
    text-align: center;
    width: 100%; 
}
Discussion courtesy of: BlackPOP

Here's what you need with only 3 div containers

The markup:

<header>
    <div class='logo'></div>
    <div class='appName'><h3>Some App</h3></div>
    <div class='btn-container'>
        <button >Help</button>
        <button>Logout</button>
    </div>
</header>

and the CSS:

header {
    position: fixed;
    top: 0px;
    width: 100%;
    display: table;
}
header div {
    display: table-cell;
    vertical-align: middle;
}
.logo {
    width:40px;
    background: steelblue;
    height: 40px;
    float: left;
}
.btn-container {
    width: 80px;
    float: right;
}
.appName {
    text-align: center;
    width: 100%;
}
Discussion courtesy of: Vikram Deshmukh

This recipe can be found in it's original form on Stack Over Flow.