View Full Version : Layout of text and images

05-26-2005, 05:21 PM
I have a three column layout and I'm wondering if there is ways of arranging my text around images within my centre (content) column. I realise I could insert a table within the centre <div> but I thought the whole idea of using CSS was to move away from layout cells and tables. There is a picture of the type of thing I'm trying to achieve here (http://www.surviving-chesterfield.co.uk/test/layout.htm)
If I try and input text within a <div> that also contains an image the text only ever appears at the bottom and I cannot arrange it so it appears at the side.
Thinking about solutions to this I would imagine that one way of doing this would be to place a new <div> within my centre <div> that could contain the image and in some way would align itself relative to the <div> that contains it.
Am I making any sense?
I fear not :o

05-26-2005, 05:40 PM
That's certainly possible, you need to give the image a class like so -

<img src="blah.jpg" class="image">

Then in your CSS, float it to where you want - eg.

img.image {
float: right;
margin: 10px


05-26-2005, 05:42 PM
Thanks Mark87,
I'll give it a go now

05-26-2005, 05:47 PM
No prob, so it should be like this with the image first -

<img class="image" src="blah.jpg">
<p>Your text goes here.</p>

05-26-2005, 06:02 PM
Cheers Mark87
Tried it and it worked just fine
how does giving the image a class change things
(he say's knowing full well that it might be time to start looking at
some of the many class tutorials he has seen around)

05-26-2005, 06:11 PM
Well you don't really need a class... but then all your images would be floating right ! - eg. if you used 'img { float: right }'.

You need the class to define it as it's own thing - you could call the class 'floatr' or something so that whenever you want an image floating right you use -

<img src="blah.jpg" class="floatr">

img.floatr { float: right }

05-26-2005, 06:23 PM
Cool, and so I just create one for the right float and maybe a couple more for centre and left. And as long as its within the centre <div> the floats and any margins I apply will be relative to the containing <div>, in this case my centre <div>

05-26-2005, 06:50 PM
Correct. Although you can only float left and right - if you want a center image with text wrapping around it it's a bit harder -


05-26-2005, 07:35 PM
That's great, thanks for the link. I probably wont want to wrap text around a centred image though. Probably too distracting, maybe ok for an effect.
Cheers again
Actualy from viewing some of the examples from the link, i can see that it would have its use's. Bookmarked for future use :thumbsup: