Best way to code this in CSS/HTML

fig · Nov 29, 2012

Hey developer types, I've got something pretty simple for a site I'm building and I'm curious how you guys might approach this:

There's nothing especially complicated about it and the content is already constrained to the size shown by existing CSS. I'm wondering what the best approach would be to fit both paragraphs around the image and caption, however.

I've got the image fitting correctly with a simple style that just floats right and gives a bit of padding so the text flows around it, but I'm having an issue getting the caption to sit underneath the image (it keeps popping up to the top right) Any ideas?

I'm currently playing with it and I'm sure I'll work out a quick and dirty way to do it, just hoping someone might have a more elegant solution for this. Thanks.

UTclassof89 · Nov 29, 2012

If you're using HTML5 you can use the <figure> and nested <figcaption> elements (put the image inside the <figure> element along with the <figcaption> and float the <figure> to the right.

If not using HTML5 just nest <div> elements to do the same.

960design · Nov 30, 2012

UTclassof89 has it right, stick the image and caption in a <div> and float the div if you have 1990's nostalgia.

I try to use the latest technology, especially if it makes my job easier. Again, I'm with UTclassof89, HTML5, <fig> and <figcaption> to happiness.

Something like:

Code:

<figure>
  <img src="/images/building.png" alt="Impressive Building">
  <figcaption>Engaging caption both descriptive and... where did you get this? Haha</figcaption>
</figure>

Then use css to float the figure element ( which will include the the caption) right.

agreeing with the smart guy

fig · Nov 30, 2012

Thanks guys, not using HTML5 yet but that's my next development step. Any backwards compatibility issues to worry about?

SrWebDeveloper · Dec 1, 2012

fig said:
Thanks guys, not using HTML5 yet but that's my next development step. Any backwards compatibility issues to worry about?

From W3Schools:

HTML5 is not yet an official standard, and no browsers have full HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

That is your generic answer for newbies. For a much more specific detailed look at support it is wise to compare HTML features vs. browser ENGINES (layout engines i.s. Webkit, Gecko, Trident, etc.) so I suggest you consult reference sites like this one when legacy support for clients or you matters:

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

MagicWok · Dec 1, 2012

HTML5 is a good thing to practice, but dependent on your project you'll have to support lower browsers (unfortunately

) - mainly IE8 and lower. In which case it's simple to just use divs as we've had to do for yonks... Same heirarchy, but HTML5 elements are nicer

Code:

<div class="body_img">
    <img src="url_goes_here" />
    <div class="caption">Lorem Ipsum</div>
</div>

A very quick 2 min mock up for you:
http://jsfiddle.net/EFce3/

fig · Dec 1, 2012

SrWebDeveloper said:
From W3Schools:

That is your generic answer for newbies. For a much more specific detailed look at support it is wise to compare HTML features vs. browser ENGINES (layout engines i.s. Webkit, Gecko, Trident, etc.) so I suggest you consult reference sites like this one when legacy support for clients or you matters:

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

Thanks, great reference. Unfortunately most of the work I do for my day job is for commercial real estate which requires horribly archaic backwards compatibility.

MagicWok said:
HTML5 is a good thing to practice, but dependent on your project you'll have to support lower browsers (unfortunately ) - mainly IE8 and lower. In which case it's simple to just use divs as we've had to do for yonks... Same heirarchy, but HTML5 elements are nicer

Code:

<div class="body_img"> <img src="url_goes_here" /> <div class="caption">Lorem Ipsum</div> </div>

A very quick 2 min mock up for you:
http://jsfiddle.net/EFce3/

Thanks, greatly appreciated. This is almost exactly the solution I came up with

segovius · Dec 2, 2012

fig said:
Thanks, great reference. Unfortunately most of the work I do for my day job is for commercial real estate which requires horribly archaic backwards compatibility.

You can use Html5 Shiv at Google code which is a js workaround to enable html5 in browsers lower than IE9 which goes a long way to fixing most issues in backwards compatibilty.

http://code.google.com/p/html5shiv/

960design · Dec 3, 2012

You can use Html5 Shiv at Google code which is a js workaround to enable html5 in browsers lower than IE9 which goes a long way to fixing most issues in backwards compatibilty.

http://code.google.com/p/html5shiv/

+1 to segovius
Yes sir, that is the way I do it, write in HTML5 and shiv it! Divitus puts me out of commission for days.

cough, cough, hack, hack ( see what I did there? hack, haha, need coffee)

Search

Search

Best way to code this in CSS/HTML

fig

macrumors 6502a

UTclassof89

macrumors 6502

960design

macrumors 68040

fig

macrumors 6502a

SrWebDeveloper

macrumors 68000

MagicWok

macrumors 6502a

fig

macrumors 6502a

segovius

macrumors regular

960design

macrumors 68040

Our Staff