Forum Moderators: open
I have got a 3-column html page layout, and in the center column, I have 2 html tables of which the first one is right aligned, thus the output looks like both table are next to each other. The code for those 2 tables looks something like this
<table align="right" class=">
<tr>
<td>
asasas
</td>
</tr>
</table>
<table>
<tr>
<td>
asasasssssssssssssssssssasasasasasasasas
</td>
</tr>
</table>
The problem is that when the content in the left table (i.e the bottom table in html code) is very long, it overlaps and hides the content of the upper right-aligned table. How to avoid this?
I would like to rectify the problem so that whenever the content in the left table is very long, instead of overlapping, the page should become horizontally long and should be then scrollable horizontally.
Any ideas?
Note: changing entire page to CSS format is not an option.
The table of the center column consists of main content (text and some wide images). In this table, there is a small child-table that I have right-aligned (which contains some related links), and there is another child-table which consists of images. When the images in this table are wide, the content of that right-aligned table gets hidden by the large images.
Here is the entire code to give you exact idea. Please play around with the width of images in the "table consisting of images" to see how any text in the right-aligned table gets hidden/visible.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!--start of left column-->
<td width="10%">
LEFT COLUMN (which contains some tables)
</td>
<!--end of left column-->
<!--start of center column-->
<td width="80%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--code for the right-aligned table-->
<table align="right" width="150" >
<tr>
<td>
some blah blah links
</td>
</tr>
</table>
some blah blah content
<!--code for the table consisting of images, of which some can be wide-->
<table width="45%" border="0">
<tr>
<td width="33%">
<img width="200" src="anything">
</td>
<td width="33%">
<img width="200" src="anything">
</td>
<td width="33%">
<img width="200" src="anything">
</td>
</tr>
</table>
lots of blah blah content
</td>
</tr>
</table>
</td>
<!--end of center column-->
<!--start of right column-->
<td width="10%">
LEFT COLUMN (which contains some tables)
</td>
<!--end of right column-->
</tr>
</table>
I don't think content should be overlapping if the code is valid -- every <td>, <tr>, and <table> tag matched up with an end tag and everything nested properly.
Paste this entire code in a html file and check out how the image overlaps over the content "some blah blah links"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!--start of left column-->
<td width="10%">
LEFT COLUMN (which contains some tables)
</td>
<!--end of left column-->
<!--start of center column-->
<td width="80%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
some blah blah content
<!--code for the right-aligned table-->
<table align="right" width="150" >
<tr>
<td>
some blah blah links
</td>
</tr>
</table>
<!--code for the table consisting of images, of which some can be wide-->
<table width="45%" border="0">
<tr>
<td width="33%">
<img width="200" src="anything">
</td>
<td width="33%">
<img width="200" src="anything">
</td>
<td width="33%">
<img width="200" src="anything">
</td>
</tr>
</table>
lots of blah blah content
</td>
</tr>
</table>
</td>
<!--end of center column-->
<!--start of right column-->
<td width="10%">
LEFT COLUMN (which contains some tables)
</td>
<!--end of right column-->
</tr>
</table>
</body>
</html>
At first I didn't know what you were talking about because it wasn't overlapping here. I figured out it was only overlapping on smaller screen resolutions.
Anyway, I think you only have to erase the text table and create another column in the image table to place the text in.I'm not sure if this is what you wanted,but here's the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!--start of left column-->
<td width="10%">
LEFT COLUMN (which contains some tables)
</td>
<!--end of left column-->
<!--start of center column-->
<td width="80%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
some blah blah content
<!--code for the right-aligned table-->
<!--code for the table consisting of images, of which some can be wide-->
<table width="45%" border="0">
<tr>
<td width="33%">
<img width="200" src="anything">
</td>
<td width="33%">
<img width="200" src="anything">
</td>
<td width="33%">
<img width="200" src="anything">
</td>
<td width="33%"><p>some blah blah links </p>
<p>some blah blah links</p>
<p>some blah blah links </p></td>
</tr>
</table>
lots of blah blah content</td>
</tr>
</table>
</td>
<!--end of center column-->
<!--start of right column-->
<td width="10%">
LEFT COLUMN (which contains some tables)
</td>
<!--end of right column-->
</tr>
</table>
</body>
</html>
Also, part of the challenge is that "align" attribute, which is rendered in various ways on various browsers when they need to go into error recovery mode.
I get results that don't overlap by replacing align="right" with style="float:right". Just that little touch of CSS makes a difference, without changing the whole page.
And if you try yowza's approach, note that the table cells there now add up to 133% - you'll want to change that.
If only it was that uncomplicated. :)
Yes, the bigger resolutions might not show the overlapping (I am on 800*600), but just try increasing the image width in my code and you will see the overlapping.
The thing is that I cannot add the components in adjacent cells as those need to be kept as different components. All pages have the same layout, but in some pages there are no images, in which case I would want the bottom content to get auto-wrapped to the left of links table.
yowza, in the code that you gave, if there are no images, then there would be a blank patch to the left of the links.
The basic problem is that when we right-align a table, all the "text" content in its parent table gets neatly arranged to the left of that right-aligned table. But as soon as there is a very wide image in the parent table, that wide-image spills over the content of the right-aligned table.
Any ideas wherein the wide image pushes the entire right-aligned table further to the right, rather than overlapping over its content?
The image table is set to 45% - but it contains images that require a minimum of 600 pixels in width. This means that even though the code is valid, you are still asking the impossible of a browser unless the screen is wide enough.
- I purposely set that percentage value to any random number on the lower side. I thought this would help avoid the overlapping by supressing the table consisting of images. Actually even if the page gets horizontally wider so that it gets a horizontal scrollbar, that is fine by me, but instead the content gets overlapped.
I get results that don't overlap by replacing align="right" with style="float:right". Just that little touch of CSS makes a difference, without changing the whole page.
- Wow, that really did the trick to a great extent. In your case, I am noticing that when the images are small in width, the links table gets neatly right-aligned to the images. When there are no images at all, the content below the images gets pulled up and that links table looks neatly right-aligned to the content.
But when the images are really wide, the links table and the images table looks aligned one below the other, rather than to the side of each other, with just the links table being aligned to the right.
Any options wherein the links table and the images table are arranged such that when the images are really wide, the images table pushes the links table to the right, rather than overlapping or pushing the links table to the top?
By setting the container table to width=100%, you are basically saying "fill the screen and no side scrolling". But your content also says you need 600px minimum for images plus three columns of text (links etc,). What's a poor browser to do when the screen width closes in?
That's why I suggest no declared suggestions for table and cell widths to start. Then build from there.
