PDA

View Full Version : Image and text alignment in CSS



Lady Macbeth
29-12-2002, 08:11 PM
I'm wondering how to align text alongside a graphic in CSS pages. In HTML I can have the code:

graphic.jpg

and the text will align with the top right hand side of the graphic and fill in the space alongside it instead of breaking and all the text going underneath the graphic, if you get what I am trying to say. I want the text wrapped to the right side of the graphic.

Should I create an "img" style to deal with the border, alignment and hspace (padding) for each image, and if so, how would it be done? The styles are in a separate linked stylesheet.

E.ric
30-12-2002, 06:29 AM
Hi Lady Macbeth

I hate giving a answer that starts with "Go to URL .... " but I might have to do it today,
Down load the page at http://www.w3schools.com/css/css_reference.asp
if you still have trouble re-post your problem and I might help later in the day.

dagon
30-12-2002, 09:56 AM
wrap the text or the image in a container (div or p) and use float.

ie

graphic.jpg
<div style="float:right">
and the text will align with the top right hand side of the graphic and fill in the space alongside it instead of breaking and all the text going underneath the graphic, if you get what I am trying to say. I want the text wrapped to the right side of the graphic.
</div>

Lady Macbeth
30-12-2002, 09:59 AM
E.ric that is a fantastic site that you have given me, just what I need - thank you very much. I'll spend some time looking around it and if I can't work it out for myself I'll get back to you. Cheers.

Lady Macbeth
30-12-2002, 10:11 AM
dagon: have had a quick play with your suggestion but I must be doing something wrong as it doesn't work. I'll have another try later and hopefully have more success. Thank you for the suggestion.

dagon
30-12-2002, 01:43 PM
if you post a url I'll take a look

Lady Macbeth
30-12-2002, 05:48 PM
After studying the CSS reference webpages that E.ric pointed me to as well as looking at the source of other pages on the web I have come to the conclusion that I'm trying to do something that can't/shouldn't be done.

Thank you both for your offers of help, I've learnt quite a few new things today. :-)

E.ric
30-12-2002, 07:35 PM
try this


<html>

<head>

<title>wrap around.html</title>
<style type="text/css">
div {float:right}

</style>
</head>
<body>
<div>
graphic.gif

and the text will align with the top right hand side of the graphic and fill in the space alongside it instead of breaking and all the text going underneath the graphic, if you get what I am trying to say. I want the text wrapped to the right side of the graphic.
</div>

</body>
</html>

Lady Macbeth
31-12-2002, 09:14 AM
Thank you E.ric, that seems to do the trick now. :-)