PDA

View Full Version : CSS positioning question


Brand
February 8th, 2007, 07:48 PM
Once again I have a question. This time it deals with text and images in a div.

I want it to look like this:
[/URL][URL="http://imageshack.us"]http://img167.imageshack.us/img167/1788/picture1ek7.png (http://imageshack.us)

I want the picture to always be in the corner with the text wrapping around it. I set a div with the image inside of it inside the div with the text and set the image div to be all the way to the right and all the way to the top. But when I set the positioning to absolute the text comes up under the image and when set to relative the image goes to the bottom of the text.

Is there a solution for this?

Once again thanks everyone for all their help.

rockboy
February 8th, 2007, 09:15 PM
You don't need a div for the image. Put style="float:right;" in the img tag. (You can also make a class for the image and put the css in a style sheet.) Put the image in with the main content.
<img src="filename.jpg" style="float:right;" width="100" height="100" border="0" alt="">

http://www.w3.org/TR/CSS1#float

Buzz
February 8th, 2007, 10:21 PM
Rockboy is dead on.

Another option is to simply add align="right" to the image tag. The align property inside an image tag will essentially have the same effect as css' float:right but it's just standard html.


To answer about positioning... Absolute means absolute. It anchors a selector in relation to the to top left corner of the browser window in all cases. Absolute positioning ignores all other page content. Relative positioning refers to the first containing or nearest selector for the items anchor.

In most cases I avoid any positioning tag because generally they aren't needed. using margins and padding for a selector can have the exact same effect as using position: relative; And absolute positioning is even more rarely used by me because you can't determine the width of a users browser. I really only use absolute positioning for CSS drop down menus or lightbox effects.

Brand
February 12th, 2007, 03:42 PM
Thank you once again for all the help all of you have been giving me. Thank you.