putting boxes next to each other without space between

Benjaminss · #1 (**permalink**) 08-15-09, 06:45 PM

putting boxes next to each other with out space between

--------------------------------------------------------------------------------

Hi all,

I'm a beginner with XHTML, creating my very first website, so please forgive me if this should be a stupid question:

I crated a table with 6 colums. Each column has a border. I'd like to set the 1st column on the left side, and the other 5 columns without a space between them on the right side. But there is still space between them. What am I doing wrong?? By the way - the 5 colums on the right side contain pictures. They are supposed to be in the middle with the same distance around to the border - doesn't work either ... the picture stucks at the top - but at least horizontally in the middle ...

HTML Code:

<TABLE style="cellpadding:0; cellspacing:0; width:85em;">
<TR>
<TD>
<DIV style="float:left; 
background-color:#f5f5f5; 
border:1px solid #CC6699; 
width:10em; height:5em; 
text-align:left;">
<B>text</B>
</DIV>
</TD> 
<TD>
<DIV style="float:right;
border:1px solid #CC6699; 
width:10em; height:5em; 
text-align:center; 
vertical-align:middle; 
display:table-cell;">
<IMG style="align:center; 
width:9em; 
height:4em;" 
src="path" 
alt="PICTURE">
</DIV>
</TD> 
<TD>
<DIV style="float:right;
border:1px solid #CC6699;
width:10em; height:5em; 
text-align:center; 
vertical-align:middle; 
display:table-cell;">
<IMG style="align:center; 
width:9em; 
height:4em;"
src="path" 
alt="PICTURE">
</DIV>
</TD>
<TD>
<DIV style="float:right;
border:1px solid #CC6699;
width:10em; height:5em; 
text-align:center; 
vertical-align:middle; 
display:table-cell;">
<IMG style="align:center; 
width:9em; 
height:4em;" 
src="path" 
alt="PICTURE">
</DIV>
</TD>
<TD>
<DIV style="float:right;
border:1px solid #CC6699; 
width:10em; height:5em; 
text-align:center; 
vertical-align:middle; 
display:table-cell;">
<IMG style="align:center; 
width:9em; 
height:4em;" 
src="path" 
alt="PICTURE">
</DIV>
</TD> 
<TD>
<DIV style="float:right; 
border:1px solid #CC6699; 
width:10em; height:5em; 
text-align:center; 
vertical-align:middle; 
display:table-cell;">
<IMG style="align:center; 
width:9em; 
height:4em;" 
src="path" 
alt="PICTURE">
</DIV>
</TD>
<TD>
<DIV style="float:right; 
border:1px solid #CC6699; 
width:10em; height:5em; 
text-align:center; 
vertical-align:middle; 
display:table-cell;">
<IMG style="align:center; 
width:9em; 
height:4em;" 
src="path" 
alt="FLAG OF CHILE">
</DIV>
</TD> 
</TR>
</TABLE>

wirehopper · #2 (**permalink**) 08-24-09, 09:29 PM

I'd change:

HTML Code:

<DIV style="float:left; 
background-color:#f5f5f5; 
border:1px solid #CC6699; 
width:10em; height:5em; 
text-align:left;">

to

HTML Code:

<style type="text/css">
body
{
padding:0;
margin:0;
}
x {
float:left; 
background-color:#f5f5f5; 
border:1px solid #CC6699; 
width:10em; height:5em; 
text-align:left;
}
</style>
</head>
<body>
<div class="x">
Content
</div>
</body>

Note the padding and margin settings - they may be helpful.

DaiLaughing · #3 (**permalink**) 08-25-09, 03:05 AM

Quote:

Originally Posted by wirehopper

I'd change:

x {

There should be a dot at the start of that line.

Margin:0px is the simple answer.

wirehopper · #4 (**permalink**) 08-25-09, 07:42 AM

You are correct DaiLaughing. Good catch.

aburrows182 · #5 (**permalink**) 09-04-09, 06:44 AM

Don't structure a website with tables! It should only be used for tabular data.By putting a div within a table cell you are defeating the point of divs.

job0107 · #6 (**permalink**) 09-04-09, 06:57 AM

Quote:

Originally Posted by aburrows182

Don't structure a website with tables! It should only be used for tabular data.By putting a div within a table cell you are defeating the point of divs.

Not necessarily, div's can be used for some very fancy formatting inside table cells.

job0107 · #7 (**permalink**) 09-04-09, 08:10 AM

Try it like this:

HTML Code:

<style>
.left_div
{
 float:left;
 width:10em;
 height:4em;
 background:#f5f5f5;
 border:1px solid #CC6699;
 padding:.5em;
 }
.left_center_div
{
 height:4em;
 }
.right_div
{
 float:right;
 border:1px solid #CC6699;
 height:4em;
 padding:.5em;
 }
.image
{
 width:9em;
 height:4em;
 }
</style>
<div class="left_div">
 <div class="left_center_div"><B>text</B></div>
</div>
<div class="right_div"><IMG class="image" src="path" alt="PICTURE1"><IMG class="image" src="path" alt="PICTURE2"><IMG class="image" src="path" alt="PICTURE3"><IMG class="image" src="path" alt="PICTURE4"><IMG class="image" src="path" alt="PICTURE5"><IMG class="image" src="path" alt="FLAG OF CHILE"></div>