Image and text caption problem

Hello everyone, I'm newish to CSS and I'm in the progress of designing a site from scratch with xtml and css.

First of all, my xhtml and css validate fine. xhtml validates as strict.

On this page - http://speed.george-edwards.co.uk/in...resources.html - that I've designed, you can see a few images, then a bit of text that go with them. Ideally I want them to be spaced out evenly down the page, with the text aligning itself with the top of the image. I've tried accomplishing it with floats and tinkering with the margins and paddings, but I can't seem to get the result I want.

At the moment the problem is that either the images aren't spaced out evenly (although this maybe because they are of different dimensions?), and also the text is getting pushed around by the text above it - i.e. it's out of line with the image next to it.

For example, I would like this all the way down the page:

PICTURE | TITLE
PICTURE | Lorem ipsum........
PICTURE |
PICTURE |

However, I'm getting results like this:

PICTURE |
PICTURE |
PICTURE | TITLE
PICTURE | Lorem ipsum......

And so on...

Sorry for the long post - any help will be gratefully received.

Try putting your images and text ech in seperate divs then float right and left, eg......

#image{
float: left;
}


#text{
float: right;
}

That makes it go completely wrong, and I get a float problem with the images stepping inwards down the page...

Hmmm, ok, make a container 500px wide and float it right. Dont set a height to it obviously. This container will hold your text and images..........

Then inside this container, have another container to hold your images in, float it left and make it about 130px wide.

Then make yest another container to hold your text, 370px wide and float right.

Something along the lines of........

HTML

Code: Select all

<div id="main_container">
<div class="images">Images in here</div>
<div class="text">Text in here</div>
</div>

CSS

Code: Select all

#main_container{
width: 500px;
float: right;
}

.images{
width: 130px;
float: left;
}

.images{
width: 370px;
float: right;
}

This may not get it looking perfect straight off but you'll definately be going in the right direction.

Hope this makes sense

Danny322

Thanks, I'll give it a whirl. I'm guessing there was a typo in your code as both CSS properties were .images where the float: right one should have been text? hehe no problem.

I'll let you know how I get on.

Danny - getting there now. I've got a similar result to how I started out with. I had to clear: left the images to stop some typical float issues coming up with stacking.

Stage 2 - haha - how would you recommend setting the margins so it's all spaced out properly? Thanks for your help so far.

Try adding padding-top: 16px; to your 'innerContentImages' CSS

.innerContentImages {
width: 130px;
float: left;
clear: left;
padding-top: 16px;
}

Thanks, with your help I'm getting there. It's even more perfect when the images are all the same size.

But for now, I've perfected that thanks to your help Danny...but...........

Could someone take a look at this weird IE7 bug for me... head along to: http://speed.george-edwards.co.uk/services.html in any standards compliant browser (Camino, Safari, Firefox, etc). Notice that the text titles line up perfectly with the image (thanks, Danny, once again).

But then look at the same page with IE7, and see how the bottom element lines up - "Irregular Dimensions and Weight" - IE7 renders it higher up and out of line. I've tried lots of things, the display: inline fix, desperately made a new CSS property with a greater top margin.. etc

Any ideas?

Hi

In your innercontenttextfinal, try replacing margin-top: 3em with padding-top: 40px;

I havent tested it but it might work.

Cheers Pat