Coding Help

[JakeSS14]

Okay, now i'm setting up a new page on my website, its a game collection page.

http://i36.tinypic.com/m59pj.jpg

Now as you can see from the image i want the box below to go next to that box but it wont budge :P

Heres the code of the section under the banner;


<div id="main">

<div id="game">

<div class="block">
<img src="/images/bfbc.gif" border="0">
<div class="clear"></div>
</div>

<div class="block">
<img src="/images/bfbc.gif" border="0">
<div class="clear"></div>
</div>

<div class="block">
<img src="/images/bfbc.gif" border="0">
<div class="clear"></div>
</div></div>

</div>

CSS Section for "game"


#game {
float:none;
width:200px;
padding:0 10px 0 10px;
}

As you can see i've set the float to none, which was "left" but i cant see how to get them to go next to the other one with a 10px gap in between ;)

[Richie]

You're missing the css for your block class. That's where you specify your 200px width. The game width should be set to 100% of the page, at the moment it's set to 200px, which is only room for one box in a line, so the next is moved onto the line below.

That should do the trick.

If that doesn't work, send me a bigger sample of your html and css and I'll take a look. I'm doing lots of html/css currently so it's the best time for me to look at it while I remember it.

[Tykain]

What Richie said, or just make a table.

[theColster123]

What Richie said, or just make a table.
I was thinkin that :)

[Richie]

CSS is much better, trust me ;)

[JakeSS14]

.block {
background-color:#494949;
font-size: 11px;
margin:10px 0 10px 0;
padding:10px;
}

Thats the CSS for "block"

I'm kinda confused Richie, width 100% wouldn't it make the box the full width across i only want it 200px though

[steedster]

I haven't understood a single word of this thread. It's all too complicated!

[Richie]

I take it your 'main' div is the main content area? If so, that's fine.

So main is main content, game is the area for the blocks to go into and block is each block. Each block is only 200px wide, that's where it should be specified.

The game is the area the blocks go in, which you should want going across the main content. But by specifying it to only 200px wide, can you see that there's a max width of 200px, only room for one box on a line. so the rest are pushed down onto the next line.

Here's what you should need in the CSS.


#game {
float: left;
width: 100%;
padding:0 10px 0 10px;
}

.block {
background-color:#494949;
width: 200px;
font-size: 11px;
margin: 10px 0 10px 0;
padding: 10px;
}

Hopefully that should do it.

[JakeSS14]

I cant change the width to the block as thats used for all the sections on the site so the banner is reduced to 200px ;)

Hmm

[Tykain]

So make a new div specifically for that. And why would you need to use that to reduce the banner size to 200px anyways btw ?

[Richie]

Yea, make a 'gameiconblock' or something.

[Arizona Snow]

If you change the float to float:left all the blocks should go next to each other providing there is space on the row, any time you want to force the block to the next row insert an empty div using - style="clear:left;" -. Everything then should line up as desired.