Floating cutline under an image

@lkeeneyOct 10.2014

I have the following code in which I want both the image and the cutline under the image to float left. Unfortunately, the text floats to the right of the image, but it wraps around under the image and is over the top of the cutline.

What am I doing wrong?

[CODE] <div id=”image1″><img src=”images/box.jpg” alt=”Box”></div> <div id=”cutline”>This is a box.</div> [/CODE]

Unfortunately, my client had me sign a non-disclosure agreement so I can not show the actual code or a link to the website.

I just want the image to be at the top left hand side of the page, and have the cutline under the image. I then want text to start at the top right-hand side of the image and to float down and wrap around to the left and under the cutline.

to post a comment

CSS

4 Comments(s) _↴

@Sup3rkirbyOct 10.2014 — #Regardless of any non-disclosure agreement, you should be able to provide us with a replicated version of what you have, being the HTML elements and CSS. We don't need any content or information about the project, but actually seeing what you see on the page is pretty key in determining how to help. And on that note, perhaps a mock-up (in photoshop, paint, etc.) of what you are wanting to see would help as well because at this point, I'm not sure I understand your goal.

Perhaps all of that would be understood once I actually saw some CSS. I can make assumptions about your image (which is frankly a terrible thing to do when solving visual problems like CSS/styling) but I don't really know what your 'cutline' is all about, or what kind of styling is being applied (other than floats, which doesn't explain the over/under cutline stuff).

@lkeeneyauthorOct 10.2014 — #Regardless of any non-disclosure agreement, you should be able to provide us with a replicated version of what you have, being the HTML elements and CSS. We don't need any content or information about the project, but actually seeing what you see on the page is pretty key in determining how to help. And on that note, perhaps a mock-up (in photoshop, paint, etc.) of what you are wanting to see would help as well because at this point, I'm not sure I understand your goal.

Perhaps all of that would be understood once I actually saw some CSS. I can make assumptions about your image (which is frankly a terrible thing to do when solving visual problems like CSS/styling) but I don't really know what your 'cutline' is all about, or what kind of styling is being applied (other than floats, which doesn't explain the over/under cutline stuff).[/QUOTE]

I want to thank you for your interest in my problem. Apparently the word "cutline" is a term for the caption to a photograph which is used by the publishing industry. My client kept using this word and I had to ask them what it meant.

I solved my own problem. I spent the whole evening yesterday searching the internet for an answer to my problem. I had a hard time finding the answer because I wasn't using the correct search words. I eventually found the answer at this very helpful website: http://css.maxdesign.com.au/floatutorial/

This site not only answered my question, but gave me a lot of new ideas as well.

Thanks again.

@deathshadowOct 11.2014 — #Really you kind-of had a "not everything needs it's own DIV" scenario there. Also usually that would be called a "figure" or "caption", not a "cutline".

&lt;div class="trailingPlate"&gt;
 &lt;img src="images/box.jpg" alt="Box" /&gt;
 This is a box.
 &lt;/div&gt;

@lkeeneyauthorOct 11.2014 — #Really you kind-of had a "not everything needs it's own DIV" scenario there. Also usually that would be called a "figure" or "caption", not a "cutline".

&lt;div class="trailingPlate"&gt;
 &lt;img src="images/box.jpg" alt="Box" /&gt;
 This is a box.
 &lt;/div&gt;

float the outer div, set the IMG to display:block so you can use it's bottom margin to consistently push the text below it away as desired, pad the div as desired. ONE DIV.

... and if you didn't have the text, don't waste an extra containing DIV if you don't need it!

Plates and figures. In theory you could use HTML 5's "figure" and "figcaption", but support for that is crap and it would come down to if your image is ACTUALLY a mathematical/scientific figure, which it's unlikely to actually be. Hence "trailingPlate" if it's going right, "leadingPlate" going left, or just plain "plate" if it's neither and it's own block.[/QUOTE]

Thanks for your reply.

Can you believe, I have been designing websites since about 1980, and in that time have designed about 35 websites and I have never run into the situation like this.

I did end up doing as you suggested, and it worked great.

I had never heard of the term "cutline" prior to working on this website. As I think I mentioned to you before, this is the website I am designing for an Editor. I kept using the term "Image Title" and they insisted I refer to them as cutlines "because this is the proper term for this use". So in all my correspondence with this client I use the term cutline. I know, it doesn't make any sense to me either..

Also in #CSS _↴

first-child confuse me [RESOLVED] Problem lining up multiple images and text lists Abosulute Positioning Within an Element?

Success!

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

Tweet This

Floating cutline under an image

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Floating cutline under an image

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴