Question

I have logo and logo name as text to display. Please see the image below to understand my problem clearly.
Most tips and answers found are using absolute positioning but this doesnt match my requirements.

div class boxes:
Yellow: container , Green: for logo, blue: logo text or logo name as text

All the correct display to achieve are found on the right side of the sample div layout image above.

Problem Summary:

1. Everything will be working fine if both div(logo and logo text) are floated left BUT the only problem is its floated on top. How will I display the “logo text” at the bottom of the “container”?

2. Is this possible without positioning the “logo text” to absolute?

For now the div container, logo, and logo text classes are floated left.

Answer 1

I think display: inline-block with vertical-align: bottom; gets you where you want to be;

<div class=logo>logo</div>
<div class=name>name</div>​

.logo {
    display: inline-block;
    vertical-align: bottom;
    width: 200px;
    height: 200px;
    background-color: red;
}
.name {
    display: inline-block;
    vertical-align: bttom;
    width: 300px;
    height: 50px;
    background-color: blue;
}

​

Here it is in action: http://jsfiddle.net/hajpoj/CDBHT/