homepage Welcome to WebmasterWorld Guest from 54.227.67.175
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




msg:1210989
 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?

Cheers

Nick

 

Knowles




msg:1210990
 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.

Nick_W




msg:1210991
 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....

Nick

Knowles




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

If you make it like this:

<div>
image
</div>
<div>
<div style:absolute>
text
</div>
</div>

Would that not work?

Nick_W




msg:1210993
 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...

Nick

Knowles




msg:1210994
 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.

moonbiter




msg:1210995
 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