[SOLVED] Table Floats

[AXiSS]

http://penguinisland.net/3.0/viewprof.php?u=2

 

On that page, you can see two tables, "Club Penguin Info" and "Penguin Island Info". I have them set so one is floating left and the other right, but they are one under another. Can someone look at the code and help me fix that?

[jcombs_31]

Try actually using a table to start.  That div mess you have going on defeats the purpose.  Use a table for tabular data.

[dbrimlow]

There's absolutely NOTHING wrong with your markup coding approach (in general).

 

You do have a few errant <divs> (two or three) mostly due to the ads, and you are using an xhtml doctype, but using html 4.01 code.

 

But that isn't affecting your layout. You just needed to know the right way to do it.

 

You just had 2 major errors in your style sheet and some faulty logic for your table headers and widths.

 

First.  In your style sheet, you have:

 

#pageright .title
{
color:#006699;
font-size:200%;
font-family:Arial;
font-weight:normal;
padding:none;
}

 

there is no padding "none" - change it to padding:0;

 

Next, you had a parse error (forgot the closing semi-colon after -"background-repeat:no-repeat")

 

#pageright
{
font-size:90%;
width:540px;
float:right;
padding:20px;
background-color:#FFFFFF;
background-repeat:no-repeat
height:100%;

 

always separate elements with a semi-colon.

 

*******************************

 

Now for the tables. EASY FIX!

 

Remove the <div> for title_box (unless it is in a table row or an absolute positioned element ... it is just hanging out there).

 

Now, create a table header cell for each table and apply the class="title_box". Type your title in the <th>.

 

Change the 2nd table's float:right to float:left. (2 left floating items are cleaner than a left and right with no containing box holding them in place).

 

Change the table widths to 40% - change the cell widths to %.

 

Remove "heights" from the table cells, they don't belong there and are unnecessary anyway.

 

Here is the new code for the two tables:

 

<table width="40%" cellspacing="0" class="about" style="margin-left:20px; float:left;">

<tr>
  <th colspan="2" class="title_box">Club Penguin Info</th>
  </tr>
<tr>
	<td width="49%" class="text"><strong>Penguin Name</strong></td>
	<td class="text" width="51%">
		Lt Giovanni		</td>
</tr>

<tr>
	<td width="49%"  class="text"><strong>Member</strong></td>
	<td class="text" width="51%">
		No		</td>
</tr>
<tr>
	<td width="49%"  class="text"><strong>Fav. Server</strong></td>
	<td class="text" width="51%">None</td>

</tr>
<tr>
	<td width="49%"  class="text"><strong>Active</strong></td>
	<td class="text" width="51%">
		Yes		</td>
</tr>
</table>

<table width="40%"  cellspacing="0" class="about" style="float:left; margin-left:20px;">

<tr>
  <th colspan="2" class="title_box">Penguin Island Info</th>
  </tr>
<tr>
	<td width="50%"  class="text"><strong>Forum Posts</strong></td>
	<td class="text" width="50%">
		3815		</td>
</tr>
<tr>
	<td width="50%" class="text"><strong>Tutorials</strong></td>
	<td class="text" width="50%">
		1		</td>
</tr>
<tr>
	<td width="50%" class="text"><strong>Comments</strong></td>

	<td class="text" width="50%">
		0		</td>
</tr>
<tr>
	<td width="50%" class="text"><strong>Media</strong></td>
	<td class="text" width="50%">N/A</td>
</tr>
</table>

 

Good luck

[AXiSS]

Cool, that worked. Thanks!