Using Span or Div elements to place images in a paragraph

[swordams]

Hello Everyone,I'm a total novice with CSS, but I'm trying to learn. I'm trying to place an image with a caption into a paragraph. I did some Googling and found http://www.corelangs.com/css/box/caption.html. I pretty much copy and pasted an example from this website with a few changes. Everything seemed to work fine, until I tried to align the image to the right of a paragraph with a width of 800px. Here is the css:

	.imageholder {position: relative;		width: 260px;		border:thin solid black}	.imageholder .caption {position: absolute;		width: 260px;		bottom: 0px;		left: 0px;		color: #000000;		background: #ffffff;		text-align:center;		font-size:11pt;		font-family:'Palatino Linotype', serif;		opacity:0.8;		border:thin solid black}

and the html:

<h2>Glenwood Sunday Market</h2><p><span class="imageholder" style="float:right;"><img src="glenwood.jpg" width="100%" style=:margin:0; padding:0; position:relative; left:-20">	<span class="caption">Natasha and Scott at the Glenwood Market	</span></span>Blah blah blah etc etc</p>

When I used the code as written at corelangs.com, with a <div> element for "imageholder", the image and caption looked fine, but the <div> element destroyed the paragraph formatting, and the paragraph spread to fill the width of the page, with the image at the far right. I tried using <span> instead of <div> since it is an inline element, and the positioning was fine, but the image was always offset by about 20px right of the <span> frame. I've attached a screen cap with borders added for clarity. What is the right way to do this? Should I be using <div class="imagegolder"> or <span class="imageholder">?

 

Thanks,

Adam

[dsonesuk]

You can only use span within paragraph, using left: -20; (should be left: -20px;) on position: relative element would force it to move left, but the area it originally occupied is included in its total area, that is probably what is causing the gap to appear.

[swordams]

Oops, I just realized I had written

style=:margin:0; padding:0; position:relative; left:-20"

instead of

style="margin:0; padding:0; position:relative; left:-20"

Fixing the quotation mark allows the left:-20 to fix the offset, but I'm still not sure why it's there in the first place. Is the span inheriting the margin from the paragraph? Is there a cleaner way to code this?

[dsonesuk]

As mentioned before left:20 is invalid, IT MUST HAVE unit. I don't see why you need this, unless styling from previous css, is causing conflict and you need to correct it, but i wouldn't use left: property on position: relative; as it cause problems as mentioned before, you could use

m@rgin-left: -20px;

instead.('@' = 'a', won't show in post otherwise)

 

recreation of layout i think with no reproduction of problem you mentioned.

        .imageholder {position: relative;                          width: 260px;                          border:thin solid black}            .imageholder .caption {position: absolute;                                   /*width: 260px; use right: 0 instead*/                                   right:0;                                   bottom: 0;                                   left: 0;                                   color: #000000;                                   background: #ffffff;                                   text-align:center;                                   font-size:11pt;                                   font-family:'Palatino Linotype', serif;                                   opacity:0.8;                                   border-top:thin solid black} /* to avoid double lines use for top border only*/            .imageholder img{                display: block; /* remove space caused at bottom (size of font-size) by elements not butted together - float will work also*/                margin:0;                padding:0;                position:relative;                width: 100%                /*left:-20px should not be required */            }

        <h2>Glenwood Sunday Market</h2>        <p style="width: 800px;">            <span class="imageholder" style="float:right;">                <img  src="glenwood.jpg" width="100%"  alt="" />                <span class="caption">Natasha and Scott at the Glenwood Market                </span>            </span>            Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Lorem            ipsum dolor sit amet, eu fugiat nulla pariatur. In reprehenderit in voluptate            velit esse cillum dolore consectetur adipisicing elit. Mollit anim id est laborum.            Sed do eiusmod tempor incididunt sunt in culpa excepteur sint occaecat. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Lorem            ipsum dolor sit amet, eu fugiat nulla pariatur. In reprehenderit in voluptate            velit esse cillum dolore consectetur adipisicing elit. Mollit anim id est laborum.            Sed do eiusmod tempor incididunt sunt in culpa excepteur sint occaecat.</p>

Edited November 17, 2014 by dsonesuk