Question

I have a situation where I have one div of fixed width, containing an image pulled from Twitter, and another div of variable width containing user text of variable length. What I want to achieve is something like the following:

I can do this well enough with a single div that has background-image and padding-left. But I want to be able to apply border-radius to the img element, which simply won’t be possible with a background-image.

If I do text-align: center on the outer div, it gets me halfway there. Here’s a DEMO and a screenshot:

But this obviously isn’t fully what I want.

How can I accomplish this?

Answer 1

Ask and you shall receive — a simplified jsFiddle example:

As an added bonus, the text is vertically centered too!

HTML:

<div class="logo">
    <div class="logo-container">
        <img src="http://img.tweetimag.es/i/appsumo_b.png" />
    </div>

    <div class="logo-name">
        AppSumo is a really really long title that continues down the page
    </div>
</div>

CSS:

.logo {
    background-color: #eee;
    display: table-cell;
    height: 100px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 600px;
}

.logo-container {
    background-color: #fff;
    border-radius: 10px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 75px;
}

.logo-name {
    font: bold 28px/115% Helvetica, Arial, sans-serif;
    padding-left: 85px;
}