website layout

[TheLostGuru]

I cannot figure this out... I have designed my website, but I can't figure out how to get all of the pieces to fit together. My problem is I have a big banner on the right side that is longer than all of the other pieces because I can't divide it up. Attached is a picture of my problem.



And when I try to put it in my web page it does this



How do I go about fixing this?

[loydall]

Are you using tables? If so, vAlign=top will align everything to the top of the cell.

Have you got a link to the page?

I'd put money on this being a table align problem though..

Looks like you're usign 1 table which is being stretched by the banner thus causing your problem.

If this is the case, build your page like this:

<table><tr><td vAlign="top">

<table>

<tr><td> Some content</td></tr>

<tr><td> Some more content</td></tr>

</table>


</td><td>Banner goes here</td><tr>

</table>

[1stbite]

i'm presuming your trying to do this using a table layout?

in which case you need to use colspan and rowspan to span unused columns and rows in your table.

a quick slice up of your first image would look like this using PhotoShop:

<table id="Table_01" width="512" height="350" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/93430layout_01.jpg" width="31" height="40" alt=""></td>
		<td colspan="5">
			<img src="images/93430layout_02.jpg" width="342" height="40" alt=""></td>
		<td>
			<img src="images/93430layout_03.jpg" width="18" height="40" alt=""></td>
		<td rowspan="5">
			banner</td>
		<td rowspan="5">
			<img src="images/93430layout_05.jpg" width="35" height="313" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/93430layout_06.jpg" width="31" height="148" alt=""></td>
		<td colspan="2">
			<img src="images/93430layout_07.jpg" width="70" height="148" alt=""></td>
		<td>
			my picture</td>
		<td colspan="2">
			<img src="images/93430layout_09.jpg" width="67" height="148" alt=""></td>
		<td>
			<img src="images/93430layout_10.jpg" width="18" height="148" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/93430layout_11.jpg" width="31" height="29" alt=""></td>
		<td colspan="5">
			<img src="images/93430layout_12.jpg" width="342" height="29" alt=""></td>
		<td>
			<img src="images/93430layout_13.jpg" width="18" height="29" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/93430layout_14.jpg" width="31" height="77" alt=""></td>
		<td>
			<img src="images/93430layout_15.jpg" width="44" height="77" alt=""></td>
		<td colspan="3">
			text conent here...</td>
		<td>
			<img src="images/93430layout_17.jpg" width="42" height="77" alt=""></td>
		<td>
			<img src="images/93430layout_18.jpg" width="18" height="77" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/93430layout_19.jpg" width="31" height="19" alt=""></td>
		<td colspan="5">
			<img src="images/93430layout_20.jpg" width="342" height="19" alt=""></td>
		<td>
			<img src="images/93430layout_21.jpg" width="18" height="19" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/93430layout_22.jpg" width="512" height="36" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="31" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="44" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="205" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="25" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="42" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="18" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="86" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="35" height="1" alt=""></td>
	</tr>
</table>

note the uses of colspan and rowspan.

with some simple math you could probably scale up the above example to fit your purpose.