Question On CSS and Divs

[Baseball435]

Hey everyone. Well im trying to make a big square made out of little squares that are 100px by 100px each. The big square is a 3 by 3 of each of the little squares. I have the square done but the problem im having is that a little space between each of the squares shows up. I cant figure out how to get rid of it. The css for each of the squares is this...

Code: Select all

#mapwrapper {padding:0px; margin:0px;}
#mapwrapper a {border-bottom:none;}

#topleft {padding:0px; margin:0px; width:100px; height:100px; display:inline;}
#topcenter {padding:0px; margin:0px; width:100px; height:100px; display:inline;}
#topright{padding:0px; margin:0px; width:100px; height:100px; display:inline;}

#centerleft {padding:0px; margin:0px; width:100px; height:100px; display:inline; }
#centercenter {padding:0px; margin:0px; width:100px; height:100px; display:inline; }
#centerright{padding:0px; margin:0px; width:100px; height:100px; display:inline; }

#bottomleft {padding:0px; margin:0px; width:100px; height:100px; display:inline; }
#bottomcenter {padding:0px; margin:0px; width:100px; height:100px; display:inline; }
#bottomright{padding:0px; margin:0px; width:100px; height:100px; display:inline; }

and then my div tags are just div tags that have a img inside of them. Can someone please tell me why it isnt working? Thanks!

[Jackolantern]

That sounds perfect for a table, honestly, unless you are not wanting one for some specific reason. Don't be afraid to use tables for things beyond tabular data just because it is "out of style" now. In fact, if this is for a map or something like that, technically it is part of the content and really should be handled in a table. You can see how ugly this is going to get in CSS already!

[Baseball435]

That sounds perfect for a table, honestly, unless you are not wanting one for some specific reason. Don't be afraid to use tables for things beyond tabular data just because it is "out of style" now. In fact, if this is for a map or something like that, technically it is part of the content and really should be handled in a table. You can see how ugly this is going to get in CSS already!

Yeah I was considering tables but am so used to div's that i thought i would just stick with them. But ill try it out and tell you how it works! Thanks!

~baseball435

[Baseball435]

didnt work, I got the space to go away inbetween each colum but not the rows. Supposedly its called whitespace but i cant seem to get rid of it

[Jackolantern]

What didn't work? Are you using tables now, or still CSS?

[Baseball435]

tables didnt work. Same thing happened. Now im back to divs

[hallsofvallhalla]

how would tables not work??? Tables would work perfectly but you have to include CSS.

psuedo code

css

Code: Select all

#divtab1
{
width 100px;
height 100px;
}

#divtab2
{
width 150px;
height 100px;
}

#divtab3
{
width 100px;
height 200px;
}

Html

Code: Select all

<table>
<tr>
<td>
<div id = 'divtab1'>
//place code here to be inside table
</div
</td>
<td>
<div id = 'divtab2'>
//place code here to be inside table
</div
</td>
<td>
<div id = 'divtab3'>
//place code here to be inside table
</div
</td>
</tr>
</table>

[Jackolantern]

Yeah, tables will work. Like Halls said, you can do anything with tables, you just have to put the CSS in to do it. You are 100% in control of all spacing, whitespace, etc.

[Baseball435]

Yeah, tables will work. Like Halls said, you can do anything with tables, you just have to put the CSS in to do it. You are 100% in control of all spacing, whitespace, etc.

its alright, im just using divs and leaving the spaces. Ill post some screenshots tomorrow. I just need some more pictures to throw in there. I still need a picture of a spaceship but im no pixel artist

[hallsofvallhalla]