Layout issues.

I have 4 images I want to be side by side (not so close, say 25%,25%,etc.. each to equal 100% to fit the width of the page) in the middle of my page.

All I've been able to do is put them in frames to get them side by side. I don't know how to move them. I don't have a style sheet, and if I did I'd need to know where to put what.

Here's what my code is like.

Code:

<html> <HEAD> <TITLE>SITE TITLE</TITLE> <style type="text/css">frameset, p {background:black}</style> </HEAD> <frameset cols="25%,25%,25%,25% "border="0" frameborder="0" framespacing="0" noresize="noresize" scrolling="no"> <frame src="/images/1.png"/> <frame src="/images/2.png"/> <frame src="/images/3.png"/> <frame src="/images/4.png"/> </frameset> <noframes></noframes> </html>

This puts all the images side by side how I want, but at the top of the screen. I want them to be in the center, regardless of whatever someone's resolution is. How do I do this?