Some help with tables in HTML

liunx

Guest
On another forum I posted this:

Well, my site: <!-- m --><a class="postlink" href="http://sonicsoft.supersanctuary.com/TurbohogStudio/">http://sonicsoft.supersanctuary.com/TurbohogStudio/</a><!-- m --> only seems to work correctly in full window in firefox. If you make the window smaller words from one column will start going to other columns and stuff! And it flat out doesn't work in IE or Opera. I want the words to stay in their proper column when you change the window size, I know it's possible. Please help.
Then someone replied:

When you float (read: align="left" etc) an element like a table to the left or right, it'll always be as far left as it can go in the constraints. In this case, the constraint is the actual window, meaning your left and right-floated tables are always going to be on the left and right of the window. Since you've created those two tables first, they take priority over the center table, causing your overlapping tables.

"Fixing" it isn't all that difficult, and it involves creating an invisible frame around your three table layout to keep them organised. Take out the align="whatever" crap, and, around the three tables, make another table with no border which has a width of 100%. Make one row with three cells in this table, and put each of your column tables in them. Align one cell to the left, one to the center and one to the right, and you have your frame.
Then I posted:

Thanks, but I think I messed up. How can I get it so all the tables are spread out like they are in full window in firefox and the middle is a bit messed up:
Code:http://turbohog.wordpress.com/?p=9
Use <!-- m --><a class="postlink" href="http://sonicsoft.supersanctuary.com/TurbohogStudio/">http://sonicsoft.supersanctuary.com/TurbohogStudio/</a><!-- m --> as a reference, I appreciate the help!
And no one replied, I desperately need the help and it would be highly appreciated!You've got a three column layout there. Maybe this will help.

<!-- m --><a class="postlink" href="http://alistapart.com/articles/holygrail">http://alistapart.com/articles/holygrail</a><!-- m -->
 
Back
Top