[HTML] Need help with a 2 column layout.

[!BERZERK!]

ok, so heres the problem.

I;m making a new online radio station, its called Mechanical Animals. anyway, the problem is. I made a side column with radio stats and such, and then im trying to put a content box on the right side of it. but ive tried to use the align command, ive used css, and it wont go beisde it, i checked the pixel size and if you use IE you can zoom in, the pixels should just slide through. please help

<html>
<head>
<title>Mechanical Animals - Metal for the Ages</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="900" border="0" cellpadding="0" cellspacing="0" style="float: middle;">
    <tr>
    <td>
<table id="Table_01" width="900" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="7">
            <img src="http://forum.ragezone.com/images/header.gif" width="900" height="117" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href=""><img src="http://forum.ragezone.com/images/home.gif" width="163" height="58" alt="" border=0></a></td>
        <td>
            <a href=""><img src="http://forum.ragezone.com/images/radio.gif" width="139" height="58" alt="" border=0></a></td>
        <td>
            <a href=""><img src="http://forum.ragezone.com/images/jobs.gif" width="135" height="58" alt="" border=0></a></td>
        <td>
            <a href=""><img src="http://forum.ragezone.com/images/djpanel.gif" width="144" height="58" alt="" border=0></a></td>
        <td>
            <a href=""><img src="http://forum.ragezone.com/images/contact.gif" width="136" height="58" alt="" border=0></a></td>
        <td>
            <a href=""><img src="http://forum.ragezone.com/images/navspacer.gif" width="183" height="58" alt="" border=0></a></td>
    </tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="Table_02" width="234" Height="31" border="0" cellpadding="0" cellspacing="0"background="http://forum.ragezone.com/images/side_radio.gif">
<tr>
<td>
</td>
</tr>
</table>
<table id="Table_02" width="234" Height="78" border="0" cellpadding="0" cellspacing="0" 

background="http://forum.ragezone.com/images/side_radio_content.png">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="Table_02" width="234" Height="34" border="0" cellpadding="0" cellspacing="0" background="http://forum.ragezone.com/images/side_stats.gif" >
<tr>
<td>
</td>
</tr>
</table>
<table id="Table_02" width="234" Height="212" border="0" cellpadding="0" cellspacing="0" 

background="http://forum.ragezone.com/images/side_stats_content.gif">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="Table_02" width="234" Height="34" border="0" cellpadding="0" cellspacing="0" background="http://forum.ragezone.com/images/side_ad.gif" 

style="">
<tr>
<td>
</td>
</tr>
</table>
<table id="Table_02" width="234" Height="286" border="0" cellpadding="0" cellspacing="0" 

background="http://forum.ragezone.com/images/side_ad_content.gif">
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td>
<div align="right">
<table id="content" background="http://forum.ragezone.com/images/main.gif" height="675" width="666" align="right" style="float: right;">
<tr>
<td>
</td>
</tr>
</table>
</div>
</td>
</tr>
</td>
</tr>
</table>
</body>
</html>

screenie:

 

[Kedo]

Use DIVS.
They're way easier to do than tables. I think I know what your problem is.

When you used CSS, you didn't have the style.


So try this:

<html>
<head>
<title>Your Site Here!</title>
<style type="text/css"> //Remember! Style goes in between the headers or else it WONT work!


div.Table1{
      background-image:url(ADD YOUR IMAGE URL HERE);
      image-align: left/center/right; //Only use one of those.
}
</style>
</head>
<body>
<div class="Table1"><p>Blah</p></div>

</body>
</html>

Unlike tables, DIVS can have images as the background.. so the: background-image:url(ADD YOUR IMAGE URL HERE); will be your div background. You can have text inside the image..
Notice I said BLAH, that text will be inside the image.
I'm not sure though. I'm kind of new to CSS.
Hope I helped?

 

[!BERZERK!]

tables can use images as backgrounds, and divs image backgrounds dont work in firefox as tables do.

 

[Madison]

Um if you are going to use divs (good idea) don't name them something stupid like Table1, are you trying to confuse yourself or what?


Anyway to the OP: the suggestion is a start, he's right, don't use tables, use div tags.
If you are going to use tables, (they have their place tabulated data is probably the best example) then use them right, don't make so many, and don't use the same ID over and over again.

Write it up to the XHTML standards for the most portability, and I use firefox with a developer add onthat has some nice tools for css, xhtml validation and helping you see what is what on your page.

firefox addon: https://addons.mozilla.org/en-US/firefox/addon/60
w3c Valdiators: http://www.w3.org/QA/Tools/


EDIT: !bezerk! is wrong use CSS to put in the background images.
images are NOT a good excuse to use a table.

 

[Kedo]

@Madison -- Table1 was an example; lol.

@ Berzerk! -- they work just as good. I use Firefox.

Look @ a tutorial on: www.w3schools.com/
It's not hard at all.
I will edit this post when I have the SAME exact layout coded. :]

 

[!BERZERK!]

i got it done using divs

ill admit, you where right.

and ive learnt from the experience.