How to align divs horizontally which represents a table row

Question

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.

score 1 · Accepted Answer · answered Dec 19 '13 at 12:12

1

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

answered Dec 19 '13 at 12:12

Pete

57,112
28
117
166

Usually UI designers suggest not to use tables for layout. Does using `display: table` and `display: table-cell` also relate to what they say? – Krishna Chaitanya Dec 19 '13 at 12:22
1

no using display table means that you are using divs but treating them as tables - actual tables in html are for tabular data only but making divs behave like tables is okay as this is css only – Pete Dec 19 '13 at 12:40

score 0 · Answer 2 · edited Dec 19 '13 at 12:41

0

Try this:

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

edited Dec 19 '13 at 12:41

Jonathan

20,053
6
63
70

answered Dec 19 '13 at 12:13

BlackPOP

5,657
2
33
49

score 0 · Answer 3 · answered Dec 19 '13 at 12:15

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%;
}

How to align divs horizontally which represents a table row

3 Answers3

Linked