I have a small table problem. I am adding a screenshot of the problem because I don't know how to explain it well. Here is the link: screenshot (<!-- m --><a class="postlink" href="http://slow56kftp.netfirms.com/problem.JPG">http://slow56kftp.netfirms.com/problem.JPG</a><!-- m -->)<br />
Besically, I designed a website so it looks good in both the 800X600 screen resolution and 1024X768. The screenshot that you see is in 1024X768 screen resolution. Everything is fine except the one row table that appears to the right of the screen. I don't know why it goes to the right of the big table and not at the bottom of the table.<br />
If I ad a bunch of brake tags <BR>, it will work but in case the big table becomes bigger when adding more contant to it, the small one row table moves to the right of the big table again. How can I solve this problem? What is the web developer professional way of doing it?<!--content-->I am assuming that the table has three columns. If so, Instead of making two separate tables, make one with three columns and two rows. Notice what I added to the second row to make it span the three columns.<br />
<table width="100%" border="1"><br />
<tr><br />
<td align="center"><br />
R1C1<br />
</td><br />
<td align="center"><br />
R1C2<br />
</td><br />
<td align="center"><br />
R1C3<br />
</td><br />
</tr><br />
<tr><br />
<td align="center"colspan="3"> <br />
R2C1<br />
</td><br />
</tr><br />
</table><!--content-->Originally posted by slow56kftp <br />
Everything is fine except the one row table that appears to the right of the screen. I don't know why it goes to the right of the big table and not at the bottom of the table.<br />
How can I solve this problem? <br />
<br />
<br />
Most likely you have made an coding error. However without actually providing a link to your code all we can do is stab in the dark. For real help you need to provide an URL.<br />
<br />
<br />
What is the web developer professional way of doing it? <br />
<br />
That would be to not (ab)use <table> to create general page layout, but insted make the page with CSS.<br />
<br />
There are many ways to do a 3 column layout with CSS, but here is one example<br />
<br />
<br />
<div style="width:33%; float:left"> R1C1</div><br />
<div style="width:33%; float:left">R1C2</div><br />
<div style"margin-left:66%;">R1C3</div><br />
<br />
<div style="clear:both;">R2C1-3</div><!--content--></table><br style="clear: both" clear="all"><br />
<br />
<table>...<!--content-->The problems was that for both the big and small table the tag align="left" is what caused the problem.<br />
<br />
So for both tables I has something like:<br />
<br />
<table align="left"><br />
...etc..etc<br />
</table><br />
<br />
I took the align out and I am having no more problem.<br />
<br />
Thanks for the sugestions.<!--content-->
Besically, I designed a website so it looks good in both the 800X600 screen resolution and 1024X768. The screenshot that you see is in 1024X768 screen resolution. Everything is fine except the one row table that appears to the right of the screen. I don't know why it goes to the right of the big table and not at the bottom of the table.<br />
If I ad a bunch of brake tags <BR>, it will work but in case the big table becomes bigger when adding more contant to it, the small one row table moves to the right of the big table again. How can I solve this problem? What is the web developer professional way of doing it?<!--content-->I am assuming that the table has three columns. If so, Instead of making two separate tables, make one with three columns and two rows. Notice what I added to the second row to make it span the three columns.<br />
<table width="100%" border="1"><br />
<tr><br />
<td align="center"><br />
R1C1<br />
</td><br />
<td align="center"><br />
R1C2<br />
</td><br />
<td align="center"><br />
R1C3<br />
</td><br />
</tr><br />
<tr><br />
<td align="center"colspan="3"> <br />
R2C1<br />
</td><br />
</tr><br />
</table><!--content-->Originally posted by slow56kftp <br />
Everything is fine except the one row table that appears to the right of the screen. I don't know why it goes to the right of the big table and not at the bottom of the table.<br />
How can I solve this problem? <br />
<br />
<br />
Most likely you have made an coding error. However without actually providing a link to your code all we can do is stab in the dark. For real help you need to provide an URL.<br />
<br />
<br />
What is the web developer professional way of doing it? <br />
<br />
That would be to not (ab)use <table> to create general page layout, but insted make the page with CSS.<br />
<br />
There are many ways to do a 3 column layout with CSS, but here is one example<br />
<br />
<br />
<div style="width:33%; float:left"> R1C1</div><br />
<div style="width:33%; float:left">R1C2</div><br />
<div style"margin-left:66%;">R1C3</div><br />
<br />
<div style="clear:both;">R2C1-3</div><!--content--></table><br style="clear: both" clear="all"><br />
<br />
<table>...<!--content-->The problems was that for both the big and small table the tag align="left" is what caused the problem.<br />
<br />
So for both tables I has something like:<br />
<br />
<table align="left"><br />
...etc..etc<br />
</table><br />
<br />
I took the align out and I am having no more problem.<br />
<br />
Thanks for the sugestions.<!--content-->