Help with Divs

[Ellie]

I'm trying to make a sort of... games system, where people can post their games.

What I want to make is a simple system like this:

Spoiler

http://img.photobucket.com/albums/v108/dudemaster/divs.png[/img]

I figured the best way to do this would be divs:

<div width="130" border="0" cellspacing="0" cellpadding="0">
  <img src="http://www.vengeance-rpg.com/forums/Games/games_yourgame.PNG"><br>
  Vengeance Online RPG<br>
  by nx:media<br>
  <br>
</div>

So that creates one of the blocks.

But then I want there to be a row of these blocks, with a certain spacing between them. When they reach the end of the row (set by the user's window size) they'd go onto the next line.

I can't work out how to do this. The best I can get is them all on a seperate line (like so: http://forums.vengeance-rpg.com/index.php?page=11 )

I was wondering if anyone knows a way I can do this?

Also, small but related question, how do I centre the contents of a Div? I know <div align=center> will centre the while div on the page, but I just want the contents aligned within it.

 

[djzalzer]

display: inline; should work.  Add it to your style tag.

 

[SamusK]

divs are a weird tag to work with. They can really clean up the site or they can be a dirty mess. For the width I would suggest using a percentage so when a person has a smaller or bigger resolution, it resizes to the appropriate width.

Now that I think about it. Are you using PHP or HTML to do the coding. I personally would use a server side code like PHP to make the entire thing work off of a loop. I did a similar thing with a website that used three columns and then it jumped to the next line. HTML is very hard coded. I am a professional web designer and I would gladly help you out. If you don't want to release the code publically, you can shoot me a PM and we will go from there. It's free by the way. I help people like you who know what they are doing. had you not known much it would be a different story. so I hope that helps a little bit. If you need more explanation I will gladly give it to you.

 

[Ceroscuro]

Just add "float: left;" to the style for the div.  That should work, if it's a block style element (e.g. remove the "display: inline;" if you added it).

 

[Ellie]

Thanks Cero that worked