floating problem redux

[Abby]

Here's my problem page. When the browser is sized down, the captions (floated to the right) force each image down. I don't want this to happen. I would rather have the caption float over the image than force the image down.Please ... I beg ... will someone explain exactly how I might accomplish this? I think I have some kind of learning disability where floats are concerned. Here's my HTML:

<div class="gallerycontainer">	<ul class="skecial">		<li>	<p class="caption">Modeled for <a href="" title="Shrek: Ogres and Dronkeys">Shrek: Ogres and Dronkeys</a> for Nintendo DS, 2007.</p>	<img src="images/Pig_Shrek.jpg" width="920px" height="655px" alt="low poly pig character">	<li>	<p class="caption">Modeled for a forthcoming film project from <a href="">Spiderwood Studios</a>, 2009.</p>	<img src="images/NeonSign3a.jpg" width="640px" height="480px" alt="high poly neon sign">	<li>	<p class="caption">Modeled for a PSP game demo from <a href="">WayForward Technologies</a>, 2005.</p>	<img src="images/Tank.jpg" width="1000px" height="565px" alt="low poly tank and collectible objects">	<li>  <p class="caption">Personal learning assignment using 3D Studio Max.</p>	<img src="images/Shuttle.jpg" width="800px" height="472px" alt="low poly shuttle">	<li>	<p class="caption">Personal project using 3D Studio Max.</p>	<img src="images/GothicSquare.jpg" width="640px" height="480px" alt="low poly Gothic square">	<li>	<p class="caption">Personal project using 3D Studio Max.</p>	<img src="images/Umdalkdan3D.jpg" width="326px" height="466px" alt="3D character model">  </ul></div>

And the CSS:

.gallerycontainer { /* image gallery */  background:transparent url('../images/bg/cyanfade.png') repeat-x bottom left;  min-width:200px;  max-width:100%;  height:100%;  margin-left:148px;}ul.skecial {list-style:none;}ul.skecial li {clear:both;}.caption {  width:180px;     float:right;    position:relative;    top:10px; right:180px;  padding:6px;   border:3px outset #700;  background-color:#000;   margin:0;   overflow:hidden;}

[ShadowMage]

First of all, you don't have any closing </li> tags whatsoever.Secondly, you're using float and positioning?! Remove the positioning in favor of margins.Thirdly, try adding clear: both to the image tags. Something like:ul.skecial li img {clear: both;}

[dsonesuk]

I don't think you will be able to achieve that result in IE using floats, it will always force the image down.the only other option is to use position: absolute; which will be contained by the li using position:relative;

.gallerycontainer { /* image gallery */background:transparent url('http://art.abbygoldsmith.com/images/bg/cyanfade.png') repeat-x bottom left;min-width:200px;max-width:100%;height:100%;margin-left:148px;}.gallerycontainer ul, .gallerycontainer li{ margin:0; padding:0; list-style:none;}.gallerycontainer li{ position:relative;}.caption {width:180px;/*float:right;position:relative;*/position:absolute;top:10px; right:180px;padding:6px;border:3px outset #700;background-color:#000;margin:0;overflow:hidden;color:#FFFFFF;}

[Dilated]

First of all, you don't have any closing </li> tags whatsoever.

Thought it's worth mentioning. Closing tags for the "li" element can be omitted in html, in the same way that "p" close tags can be omitted.

[Abby]

dsonesuk: Thanks again! That's very helpful, and it worked.I have a related problem page, now. Here it is. There's a blurb with position:absolute, contained inside a position:relative div. It's not working the same way, and maybe that's because it's a div (with a list inside it) instead of part of a list. When the browser window gets narrow, the blurb steps down and messes up the presentation of the thumbnail gallery. Is there any way to prevent it from stepping down? Here's the HTML:

<div class="relative"><div class="blurbbgs">  Additional Information:  <br><br>  <ul class="donut">    <li>Two of these backgrounds were created for my novels,     <a href="http://abbygoldsmith.com/writing/teaser_synopsis_Yer.shtml"><em>City of Slaves</em></a>     and <a href="http://abbygoldsmith.com/writing/blurb_Illusionist.html"><em>The Illusionist</em></a>.    <li>The film background layouts were created for my <a href="studentfilms.html">student films</a>.    <li>The pixel-pushed <em>CalArts</em> was done at <a href="http://filmvideo.calarts.edu/">CalArts</a>.  </ul></div></div>

And the relevant CSS:

.relative {position:relative; padding:0; margin:0;}.blurbbgs {  width:400px;  min-height:106px;  font-size:92%;  font-weight:normal;  line-height:110%;  background-color:#000;  clear:both;  position:absolute;  bottom:320px;  right:10px;  padding:4px;  border:3px groove #cfc;  margin:0;  overflow:auto;  }

Also, I appreciate anyone pointing out errors in my code, or places where it could be tighter. Thanks. As far as closing </li> tags ... my doc type is HTML, so the validator gives me error messages if I close those tags.

[ShadowMage]

Thought it's worth mentioning. Closing tags for the "li" element can be omitted in html, in the same way that "p" close tags can be omitted.

Hm...Ok. Guess I'm just used to writing XHTML...

[dsonesuk]

the reason the blurbbgs container element steps down is because its position is determined by the bottom edge of '<div class="highslide-gallery gallerycontainer">' when you shrink the screen, the thumb nail images are forced under the large image making the gallery height higher, in turn forcing, bottom edge down, and in turn dragging the blurbbgs container down with it.IF! you want it to remain in exact position, take the relative class container, and all its child elements, BUT NOT! the end closing tag of relative class container, and place them above '<div class="highslide-gallery gallerycontainer">'. Now instead of using the bottom property, use top instead.

<div class="relative"><div class="blurbbgs">  Additional Information:  <br/><br/>  <ul class="donut">	<li>Two of these backgrounds were created for my novels, 	<a href="http://abbygoldsmith.com/writing/teaser_synopsis_Yer.shtml"><em>City of Slaves</em></a> 	and <a href="http://abbygoldsmith.com/writing/blurb_Illusionist.html"><em>The Illusionist</em></a>.	</li><li>The film background layouts were created for my <a href="studentfilms.html">student films</a>.	</li><li>The pixel-pushed <em>CalArts</em> was done at <a href="http://filmvideo.calarts.edu/">CalArts</a>.  </li></ul></div><div class="highslide-gallery gallerycontainer">  <img title="book cover ~ digital painting for my novel CITY OF SLAVES" alt="LARGE" src="images/CityOfSlaves_coverart.jpg" class="city"/>	<ul>	<li>	<a onclick="return hs.expand(this, config1 )" class="highslide" href="images/ChapterHouse.jpg">		<img title="book cover in progress ~ digital painting for my novel THE ILLUSIONIST" alt="Chapter House" src="thumbs/ChapterHouse.jpg"/>	</a>	</li><li>	<a onclick="return hs.expand(this, config1 )" class="highslide" href="images/alien_city.jpg">		<img title="Alien City concept ~ for my student film EAT YOUR BRAINS" alt="Alien City concept" src="thumbs/alien_city.gif"/>	</a>	</li><li>	<a onclick="return hs.expand(this, config1 )" class="highslide" href="images/los_angeles_corner.jpg">		<img title="Los Angeles street corner ~ background used in my student film EAT YOUR BRAINS" alt="Los Angeles street corner layout" src="thumbs/los_angeles_corner.jpg"/>	</a>	</li><li>	<a onclick="return hs.expand(this, config1 )" class="highslide" href="images/bathroom.jpg">		<img title="bathroom layout ~ background used in my student film LIKE LIZ AND BETH" alt="bathroom layout" src="thumbs/bathroom.jpg"/>	</a>	</li><li>	<a onclick="return hs.expand(this, config1 )" class="highslide" href="images/bathroom_floor.jpg">		<img title="bathroom floor layout ~ background used in my student film LIKE LIZ AND BETH" alt="bathroom floor layout" src="thumbs/bathroom_floor.jpg"/>	</a>	</li><li>	<a onclick="return hs.expand(this, config1 )" class="highslide" href="images/finale_layout.jpg">		<img title="finale layout ~ background used in my student film LIKE LIZ AND BETH" alt="finale background layout" src="thumbs/finale_layout.jpg"/>	</a>	</li><li>	<a onclick="return hs.expand(this, config1 )" class="highslide" href="images/glasses_factory.jpg">		<img title="Glasses Factory establishing shot ~ background used in my student film SEEING IS BELIEVING" alt="Glasses Factory background" src="thumbs/glasses_factory.jpg"/>	</a>	</li><li>	<a onclick="return hs.expand(this, config1 )" class="highslide" href="images/Calarts.gif">		<img title="CalArts in pixels ~ done in a day while gazing out my dorm room window in CalArts" alt="CalArts in pixels" src="thumbs/Calarts.png"/>	</a>	</li></ul>	<div style="clear: both;"/></div><!--END of highslide-gallery gallerycontainer --></div> <!-- END of relative -->

.blurbbgs {[url=""][/url]background-color:#000000;border:3px groove #CCFFCC;/*bottom:320px;*/clear:both;font-size:92%;font-weight:normal;line-height:110%;margin:0;min-height:106px;overflow:auto;padding:4px;position:absolute;right:10px;top:360px; /* added by dsonesuk*/width:400px;}