Forum Home
Press F1
 
Thread ID: 28720 2002-12-29 07:11:00 Image and text alignment in CSS Lady Macbeth (2860) Press F1
Post ID Timestamp Content User
109737 2002-12-29 07:11:00 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.
Lady Macbeth (2860)
109738 2002-12-29 17:29:00 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 www.w3schools.com
if you still have trouble re-post your problem and I might help later in the day.
E.ric (351)
109739 2002-12-29 20:56:00 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>
dagon (1357)
109740 2002-12-29 20:59:00 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 (2860)
109741 2002-12-29 21:11:00 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. Lady Macbeth (2860)
109742 2002-12-30 00:43:00 if you post a url I'll take a look dagon (1357)
109743 2002-12-30 04:48:00 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. :-)
Lady Macbeth (2860)
109744 2002-12-30 06:35:00 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>
E.ric (351)
109745 2002-12-30 20:14:00 Thank you E.ric, that seems to do the trick now. :-) Lady Macbeth (2860)
1