I'm trying to build a site about PGSM (Pretty Guardian Sailor Moon) costumes, but I'm having trouble with the layout.
I thought I knew everything about coding with HTML after almost 3 years, but I guess I was wrong.
I'm bad with tables. Really bad.
Anyways, what I want is to have a banner that streches across two columns-one for the sidebar, and one for the conent. I want to have both colomns stretch down to match the other so that the borders match up. Then at the bottom I want to have my disclaimer stretch across both colomns.
That's probably confusing, so here's some screenshots:
What I have (Wrong)
See how the content colomn continues on, but the sidebar doesn't? I don't want that. I won't even discuss the disclaimer image.
And, thanks to the editing magic of Photoshop...
What I want
That's what I want. But I don't know how to get it.
Here's my codes for the tables right now. There's two because I can't seem to fit the header in the same table as the other stuff. I tried it with a different file but it makes the stuff all...weird.
Header/nav code:
Code:
<table>
<tr>
<td>
<img></img><br>
<img></img>
</td>
</tr>
</table>
Code for the content:
Code:
<div>
<table>
<tr>
<td>
Right colomn content (main stuff)
</tr>
</td>
</table>
</div>
Stylsheet stuff:
Quote:
#sidebar
{
font-size: 12px;
font-weight: normal;
text-decoration: none;
font-family: Arial;
text-align:left;
border-top: 0px solid #A3A3A3;
border-left: 1px solid #A3A3A3;
border-right: 1px solid #A3A3A3;
border-bottom: 1px solid #A3A3A3;
}
#content
{
font-size: 12px;
font-weight: normal;
text-decoration: none;
font-family: Arial;
text-align:left;
border-top: 0px solid #A3A3A3;
border-left: 0px solid #A3A3A3;
border-right: 1px solid #A3A3A3;
border-bottom: 1px solid #A3A3A3;
}
Anyone know how to get what I want?
EDIT:
Augh.
This stuff hates me.
The codes posted weird in the message. :-/