Best way to code this in CSS/HTML

[fig]

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]

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]

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:

<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]

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

[SrWebDeveloper]

Originally Posted by fig

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/Compari...s_%28HTML_5%29

[MagicWok]

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

<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]

Originally Posted by SrWebDeveloper

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/Compari...s_%28HTML_5%29

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.

Originally Posted by MagicWok

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

<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]

Originally Posted by fig

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]

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)