How to achieve table like rows within container using CSS

Question

I'm helping an artist maintain her website and have inherited some pretty outdated code. Have moved lots of redundant common code to include files and am now working on moving from inline styles to more CSS-driven styles.

For the gallery pages, e.g. http://artistsatlaketahoe.com/abstract.html, a lot of inline styling is used to force the current layout. My preference would be to replace this entirely with CSS that presents the following table-like layout within the "content" div:

[image] [image descriptives and purchase button]
[image] [image descriptives and purchase button]
[image] [image descriptives and purchase button]

I'd like to middle-align the image descriptives & purchase button relative to the image if possible. And then apply some padding above and below each row to stop using
tags for vertical spacing.

Any ideas how to create a div that I can use to get this kind of layout?

Thanks!

Answer 1

Using inline style for simplicity, move to CSS to accomplish your goal.

<div>
    <img src="#" style="float: left; padding: 10px 10px 10px 0;" />
    <div>
        <p>Text</p>
        <input type="submit" value="Submit" />
    </div>
</div>

Answer 2

<div id="container">
    <div id="row" style="display:table-row; margin:5px 0; outline:red solid 1px;">
        <div id="image" style="float:left; outline:blue solid 1px;"><img src="#" /></div>
        <div id="content" style="display:table-cell; padding:5px; outline:green solid 1px; vertical-align:middle;">
            Image Description<br />
            <input type="button" value="Button" />
        </div>
    </div>
</div>