Image and Title Next to it using CSS

**HalfMan** · May 6, 2011 02:45

Hi,

I am completely new to CSS and would like to display a thumbnail with its title to the right of the thumbnail. How do i do this without use of tables.

Something similar to below:

************
*
Thumbnail * Title
*
*
************

Thanks for your help

**ralph.m** · May 6, 2011 03:37

Hi HalfMan. Welcome to SitePoint.

You could do this in several ways, depending on how important the tumbnail is. Is it just for decoration, or should it be in the html itself? It might help if you showed us what you would have done with tables, so that we cet a better sense of what you are trying to achieve.

**ryanhellyer** · May 6, 2011 03:38

That is a difficult question to answer without more information.

Typically you would float the thumbnail left and let the text flow across the page. Or you could float them both left, both right, or one left, one right, or float the title right and let the thumbnail flow down the page.

It all depends on what exactly you are trying to achieve.

**HalfMan** · May 6, 2011 03:43

Thanks for the response. In a table i would have done it like so:

<table>
<tr>
<th rowspan="2">Image Goes Here</th>
<td>Image Title Here</td>
</tr>
<tr>
<td>Item Price Goes Here</td>
</tr>
</table>

I hope this helps

**HalfMan** · May 6, 2011 03:46

Please checkout: Stationery

I would like to have a thumbnail with its title next to it.

**ralph.m** · May 6, 2011 03:49

You could do something like this:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style type="text/css" media="all">
.imgHolder {float: left; margin: 0 10px 10px 0;}
</style>
</head>

<body>
<div>
<p class="imgHolder"><img src="image.gif" alt="item image"></p>
<p>Image Title Here</p>
<p>Item Price Goes Here</p>
</div>

</body>
</html>

**ralph.m** · May 6, 2011 03:52

Or this (based on your link):

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style type="text/css" media="all">
.item {width: 400px; background: #cdf2bf; margin: 2px 0;}
.item img {vertical-align: middle; margin-right: 10px;}
</style>
</head>

<body>

<p class="item"><img src="image.gif" alt="item image">Image Title Here</p>
<p class="item"><img src="image.gif" alt="item image">Image Title Here</p>

</body>
</html>

**ryanhellyer** · May 6, 2011 03:56

Originally Posted by HalfMan

Please checkout: Stationery

I would like to have a thumbnail with its title next to it.

When styling things like that, I typically float the image left and leave the text to flow around it. Then I apply overflow: auto to the containing block to make sure it expands to fit the whole thumbnail (otherwise the thumbnail will pop out of the box) and set the title to display: inline to make sure it flows around the float rather than popping down below it (due to taking up the complete width of the box) or setting a fixed width on it if you know for certain how wide the containing box will be.

Code CSS:

.container {
   overflow: auto;
}
img {
   float: left;
}
h3 {
   display: inline;
}

Code HTML4Strict:

<div class="container">
   <img src="#" />
   <h3>Some random text here</h3>
</div>

If there is a risk that the text could flow below the image, then you would generally want to set the heading to display: block and used a fixed width and float it to the right to prevent the text flow around the image, which tends to look a little weird. This doesn't work if the containing block isn't a fixed width though.

**Stomme poes** · May 6, 2011 04:31

and set the title to display: inline to make sure it flows around the float rather than popping down below it (due to taking up the complete width of the box)

It wouldn't. The p block would be behind the float (wouldn't see it at all) while the p's inline content wraps around the float. Give the dimensionless p a background colour and give the image a left margin so you can see behind it a bit.

Exception: giving the p Haslayout means IE will treat the p as if it were a fellow float, which might make it drop down, or might make it squish in the space next to the image, depending on how that was set up.

could just
<p>
<img src="image.png" alt="pen">
<span>Pen</span>
<span>$300</span>
</p>

Or substitute p for div if that doesn't count as a "paragraph" to someone. Not sure what the relationship is for all that content, so spans might not be best. Is this supposed to be where the image and the green area is??

You could set newlines using :after and "content" if you want to be creative...
...depends if the newline between title and price is content or decoration. If it's content you could conceiveably have a single span with a br inside it. If it's just for looks, css.
I'm not sure about the header tag if all that's underneath is a single price. If there's a description though...

**HalfMan** · May 6, 2011 05:09

thank you very much. I used ralph.m's first solution and it worked.

User Tag List

Thread: Image and Title Next to it using CSS

Thread Tools

Display

Image and Title Next to it using CSS

Bookmarks

Bookmarks

Posting Permissions