Question

I’m trying to draw a container which would contain an image (thumbnail) on the left side and a few divs next to the image (vertically: in the middle of the container). They would contain buttons and drop-down lists and, possibly, something else, apart from the plain text.

I know I need to use float:left and so on, but no luck for me — doesn’t look any good. So I won’t even provide an example of what I’ve achieved. Instead, I will provide my vision:

I don’t want a table solution, only divs — if it is possible, of course.

Could somebody help we with this one?

Answer 1

Use display: inline-block;. It’s basically a hybrid of inline and block behavior. Here’s a sample, HTML:

<div class = "container">
    <img src = "pic.png" class = "inbl"/>
    <div class = "inbl"></div>
    <div class = "inbl"></div>
</div>

CSS:

.inbl {
    display: inline-block;
    vertical-align: top;
}
.container {
    white-space: nowrap;
}

And a little demo: little link.