/    Sign up×
Community /Pin to ProfileBookmark

How do I achieve this image+caption layout using CSS?

Copy linkTweet thisAlerts:
May 14.2012

I am a new web developer trying to make my sites compliant with web standards, but there is an effect I want to achieve that I can’t see how to using divs and css. Maybe someone can help.

I want to lay pages out in rows where each row has one or more images on the left and a few lines of text on the right, with the images and text all on the same baseline. The images are of various heights, widths and orientations.

Basically what I want in each row therefore is an image or series of images on the left and a box to the right of these that automatically has the same height as the highest image and has text sitting on the bottom.

I know how to style an image to float to the left and put a div to the right of it, but how do I get the div to take on the height of the image? And if I can do that, how do I get the text to site on the bottom of the div? I am thinking I can’t do it by styling the div to have a specified height because the divs on different rows need different heights.

Many thanks to anyone with the answer.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@chryanerMay 14.2012 — you can accomplish this with a simple table..

why dont you show us what you did so far?

this is a simple example i build

copy and paste it to a html file:
[CODE]<html>
<head>
<style type="text/css">
table tr th {
width:300px;
}
</style>

</head>
<body>
<table>
<tbody>
<tr>
<th> <img src="http://www.summitpost.org/images/small/204161.jpg"> </th>
<th>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </th>
</tr>
<tr>
<th> <img src="http://www.summitpost.org/images/small/236759.JPG"> </th>
<th>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </th>
</tr>
</tbody>
</table>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@jedaisoulMay 16.2012 — Ugh, tables!

Why not enclose the divs in a container div set to "width: 100&#37;;"? That will expand the row to accommodate the tallest element. Then use one div for the images and another for the text...

.W100pc {

width: 100%;

float: left;

}

.images {

float: left;

/* settings here*/

}

.text {

float: left;

/* settings here*/

}

<div class="W100pc">

<div class="images">

<!- images go here -->

</div>

<div class="text">

<!-- text goes here -->

</div>

</div>
×

Success!

Help @Dmitri spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...