Place two lines of text next to logo

This is embarrassing, but what is the correct way to place two lines of text next to a photo/image?

The masthead for the website I’m working on is done, and I would like to add a logo to the left of the company name and tagline, but my attempts end up with those two items appearing to be vertically top aligned when I actually want everything on the baseline.

Here is some sample code that produces what I see on my actual site.

<!doctype html>
<html lang="en">
<head>
    <style>
        #masthead{
            border-collapse: collapse;                    /* Allows border?? */
        }
        
        .table{
            display: table;
        }

        .row{
            display: table-row;
        }

        .cell{
            display: table-cell;
        }

        .col70{
            width: 70%;
        }

        .col30{
            width: 30%;
        }
        
        #companyInfo{
            background-color: #FCC;
        }
        
        #brand{
            background-color: #CFC;
        }

        #brand img{
            float: left;
        }
        
        address{
            vertical-align: bottom;
            background-color: #CCF;
        }
    </style>
</head>
<body>
    <header id="masthead" class="table">
        <div id="companyInfo" class="row">
            <div id="brand" class="cell col70">
                <img src="http://placehold.it/80x100" >
                <div id="companyName">Some Company</div>
                <div id="companyTagline">Our marketing tagline...</div>
            </div>
            <address id="companyAddy" class="cell col30">
                123 Main Street
                Somewhere USA
            </address>
        </div>
    </header>
</body>
</html>

Try this

<!doctype html>
<html lang="en">
<head>
    <style>
#masthead {
    border-collapse: collapse;                    /* Allows border?? */
}

.table {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    width:1%;
    display: table-cell;
    vertical-align:middle;
}

.col70 {
    width: 70%;
}

.col30 {
    width: 30%;
}

#companyInfo {
    background-color: #FCC;
}

#brand {
    background-color: #CFC;
}

#logo img {
/*    float: left;  */
    display:block;
}

address{
/*    vertical-align: bottom;  */
    background-color: #CCF;
}
    </style>
</head>
<body>
    <header id="masthead" class="table">
        <div id="companyInfo" class="row">
            <div id="logo" class="cell">
                <img src="http://placehold.it/80x100">
            </div>
            <div id="brand" class="cell col70">
                <div id="companyName">Some Company</div>
                <div id="companyTagline">Our marketing tagline...</div>
            </div>
            <address id="companyAddy" class="cell col30">
                123 Main Street
                Somewhere USA
            </address>
        </div>
    </header>
</body>
</html>
1 Like

@ronpat,

It looks like the main change you made was to place the image I added into a table cell, right?

What is the purpose of the width here?

.cell {
    width:1%;
    display: table-cell;
    vertical-align:middle;
}

And what about here?

#logo img {
/*    float: left;  */
    display:block;
}

To assign a very small width to that first cell so it will hug the width of the image. The other cells apply values to override this value later in the cascade and the cells adjust themselves per the table alogrithm.

Made up a new ID. Assigned display:block to the image to avoid dealing with default margins around inline objects. Makes the alignment of image and text easier.

If you left out the 1% what would happen?

Are you doing this just because it is the first cell in a table row?

Is it correct that once you are inside a display: table-cell, it is as if you are on a clean canvas and so applying something like a display:block won’t interfere with other cells?

Why wouldn’t float:left work?

Good question. Nothing useful in this case since the other two columns total 100%.

No. It is being done because it contains the image and in your layout the cell should hug the image.

Not exactly. Vertical alignment between cells remains a consideration. By default, vertical-alignment between {display:table-cell}s is baseline.

A floated object “floats” to the top of the cell. It does not respond to vertical-align:anything applied to the table-cell. Should the text push the cells taller, the image would remain at the top while the text columns vertically middle.

Ultimately, the best choice depends on the layout… the context… the surroundings… the bigger picture.

1 Like

@ronpat,

Thanks for the help. I think I got the gist of things.

1 Like

Thanks for the feedback.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.