Centering 4 images

- and making them stay put...

[Melize]

I have two divs (horz. centered on the screen and with a background color), one 10 px below the other. The first one has a centered div/textbox in it. The one below contains 4 other divs, each one containing an image (.png). The images are all of the same class, but with different id's (they are clickable).

Problem 1:
I need to center these four images in relation to the colored background and the textbox in the div above them, but with not much more than ca 40px between the images. Feels like I've tried everything with no success, but hopefully there's someone among you who knows just the one solution I didn't know about... :)

Problem 2:
I also need to make the images stay in position (in a row) if the window is resized (smaller)- if that is possible. When resizing, in IE6.0 img 4 and then 3 will position themselves under img 1 and 2, but still stay inside the colored background (wich extends it's height). But it doesn't work that way in Opera or Mozilla. There the colored background stays the same size, and images 3-4 goes under 1-2, but outside the box. So does the text in the box above the images.

This page should preferably look the same in all the most important OS's, browsers, and with different resolutions. The users are a huge group of people, with all kinds of different computer equipment. Old OS's and browsers, 14"-17" screens and so on... :)

Css:

.div_below{
width:80%;
height:220px;
border:1px solid #a02000;
background-color:#fceec5;
margin-top:20px;
margin-left:10%;
}

.images{
width:120px;
height:120px;
border:1px solid #a02000;
background-color:#fceec5;
padding:0.3em 0.3em 0.3em 0.3em;
margin-top:40px;
margin-left:40px;(have tried many different solutions here...)
float:left;
}

Script (the image-divs have been shortened down a bit):

<div class="div_below">
<div class="images" id="0"><img src="img1.png" alt=""/></div>
<div class="images" id="1"><img src="img2.png" alt=""/></div>
<div class="images" id="2"><img src="img3.png" alt=""/></div>
<div class="images" id="3"><img src="img4.png" alt=""/></div>
</div>

Any suggestions? :o

[mincklerstraat]

Problem 1:

Have you tried giving a margin-right as well as margin-left to your images, each 20px or so? This might get them to 'center' a bit more.

Problem 2:

This would be standards-compliant behavior on the part of mozilla and opera (and not on the part of ie) - you've declared a height for the container, and a browser is supposed to display content extending outside of the fixed-dimension container as default, and not increase the dimension to what's beyond stipulated. So don't stipulate the container's height (no height: 120px);
there is a 'min-height' property, but I believe many browsers get this wrong. If you absolutely have to have a minimum height, you can always make a div inside your box container that's 1px wide and your desired min height.

Something else to think about: you don't have to make your images inside the "images" div tags, instead you can make your declarations for the images like:

.div_below img {
whatever
whatever
}

Trying first on firefox and opera gives you the best chance of cross-system compatibility, search for 'conditional comments' on this forum to find out how to correct for ie if it works in these browsers but not ie.

Also, I noticed that it took a while for people to answer your question. If you concentrate on just one issue, probably you're more likely to have a response.

And welcome to webmasterworld!

[Melize]

Thank you, Mincklerstraat, for taking time to answer my questions.

I'm sorry I haven't been able to answer you, but I've been away from work.
And while I was away (in bed with a longlasting cold), one of my colleagus solved the css problems for me. If anyone should be interested, I can post the code here on request.

And thanks for the tip, - I will remember to post only one problem at the time if I need to ask for help with other css riddles later on...
:)