[thelist] Positioning item with CSS

[Maximillian Schwanekamp]

Dominick Cancilla wrote:
> You're right -- I tried using floats after getting some good advice from
> this board, but went back to absolutes. The problem was the graphic that
> overlaps the text area -- using floats, IE for Windows would not display the
> thin part of the image that was outside of the text area. Do you know a
> workaround?

You should be able to accomplish the same effect using floats and a
negative margin-left on div.Popout.  Negative margins are good way to
pull something out of its container a bit, and works pretty well
cross-browser.  But for that to work, you should re-order your markup so
that the image occurs in its natural place within the content, i.e.
right after the picture title "Adam & Eve".  You'd probably need
something like:
[html]
<h1 class="paintingtitle">Adam &amp; Eve</h1>
<div class="Popout"><img src="art.jpg" alt=""></div>
<p>Oil on Canvas 24 x 36&#8221;<br>
   Price on Request</p>
<p>Here&#8217;s where you write...</p>

[css]
h1.paintingtitle {
	font-size: 1em; /* should be same as whatever body is */
	font-weight: bold;
	margin: 0 0 1em; /* 1em of space below it. */
}
div.Popout {
	float: left;
	margin-top: -0.5em;
	margin-left: -20px;
	border: 1px solid #7D999B;
}

Naturally you'd want to test the above on a variety of browsers.  Note
the <h1> instead of <p><b>.

PS - Do you know css-discuss?  If not, you might be interested in it.  A
good CSS-only list, inhabited both by newbies and by some of the world's
authorities on CSS.
http://www.css-discuss.org/

-- 
Max Schwanekamp
http://www.neptunewebworks.com/