homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Layout help - placing text to the right of an unknown size image
CSS (of course!)

 12:24 pm on Aug 21, 2002 (gmt 0)

Hi all,

I have a whole blank page, no side menus, and need to do this:

  • picture of unknown sixe on left
  • description on right

Sounds easy right?

Here's my promblem:

I need the text to be a certain width, say 250px but can't just float it to the right as on larger rez monitors it will look very poor.

Currently I'm thinking 2 divs, one for the pic and one as a container floated to the right. The float right will containg another div for the text floated left...

Anyone come up with a more elegant solution?





 1:22 pm on Aug 21, 2002 (gmt 0)

You read my mind Nick, I am assuming you will put absolute postioning on the the text div since it has to be a fixed width. I dont see any other way to do it.


 1:29 pm on Aug 21, 2002 (gmt 0)

Yes, but I can't absolutely position it as I don't know how large the img is....

Think I'm going to have to position the img right of the text instead....



 1:35 pm on Aug 21, 2002 (gmt 0)

If you make it like this:

<div style:absolute>

Would that not work?


 2:10 pm on Aug 21, 2002 (gmt 0)

That's the way I was originally going but the container div is only as wide as it's contents (the text div) so I can't float it or position it without specifying a sidth for the container.

....and I can't do that as I don't know the img sixe...



 2:12 pm on Aug 21, 2002 (gmt 0)

Its not possible to just resize all the imgs the same? I mena this seems like alot of work, and not going to be very consistant.


 2:21 pm on Aug 21, 2002 (gmt 0)

Why not:

<div class="image" style="float: left">[image here]</div>
<div class="caption" style="width:250px;">[text here]</div>
<div class="shim" style="clear: both;"></div>

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved