can't convert table-based to css-based layout

[markus]

I have not been able to figure out a way to convert my very simple table-based layout to a css-based layout. The current structure is this:

Code: Select all

<table>
<tr>
<td>Navigation</td>
<td>Content</td>
</tr>
<tr>
<td colspan=2>Footer</td>
</tr>
</table>

I've tried many different CSS-based layouts, but they all fail in one way or another. The most commom problem is that sometimes the content is small, sometimes there is a lot of content that is mostly text (which wraps nicely), and sometimes the content has non-wrapping elements like SWF objects. All of the CSS-based layouts I try have been unable to handle these things the way they are handled in my simple table-based layout.

Any suggestions??

[Lchad]

I've been doing css/xhtml since January and built about 10 complete sites since then and have been able to all the tasks that you seem to be describing. One thing that I had to do was completely change my way of thinking. Instead of thinking in terms of what a table can do, you have to start thinking "how can I make this work in divs".
Sounds to me like you need to put up a header div (most people have the business name at the top), followed by two div columns.
If you need the two columns to appear to be the same length, then set both of the columns in a wrapper div.
Followed by a footer.

Header
wrapper{column 1 for nav - column 2 for content } wrapper
footer

Use floats on both columns - clear: both on the footer and you should be relatively good to go!

[markus]

Thanks, Lchad. I know it's weird, but I actually don't need a header.

I've tried a design like that, but when I have a SWF object (about 700px wide) and the window becomes narrower than that plus the nav column, the SWF object drops below the nav. In a table that doesn't happen, scroll bars appear. That's the sort of thing that I'm talking about being a problem.

Also, I should have added that the background is white on both the nav and the content so matching column-lengths is not an issue on this particular design.

Any other ideas?

BTW: I've tried floating the nav and giving a margin-left value to the content div and had the same result.

[Ryan Fait]

There's a link to moojoo's layouts in my footer. They have headers, but they're quite nice and should get you started. Just remove #masthead and #nav in this one:

http://www.newguyinennis.com/samples...t_left_column/

[markus]

Thanks, Ryan. That is a nice layout, but it doesn't work the way I need it to. Like all of the CSS-based layouts I've tried, it can't handle all 3 things I need it to handle. In this one, for instance, I replaced the content with my 700px wide SWF object. Without changing anything else, it just overhung the right side and looked terrible. With removing the WIDTH: 778px; declaration in the style sheet, it was fine when the window was large enough. But, like all of these I've found so far, when the window is made smaller, the SWF object drops below the left-side content rather than scroll bars appearing (like with my table-based layout).

This is my guess at what the problem is and it's possible (though disappointing) that there may not be a solution. A table can have a set width, and if my SWF object is bigger than that, the table will stretch to accommodate. If a div has a set width with an object floating at the left, it will not stretch to accommodate the wider object until it has tried moving it below the floated content on the left.

Thanks again to both of you for your suggestions. Any other ideas?

[Ryan Fait]

You need to make the container a fixed width. Then it won't drop below.

[markus]

That would be ideal, but it needs to be a different fixed width depending on its contents. Ideally, the content div would have a width of 585px. That would work fine for almost every page on the site. But, on the pages with the 700px wide SWF object, that container needs to "grow" to accommodate that, just like a table cell does. However, it doesn't do that. It drops the SWF object below the left content, THEN grows to accommodate. Does that make sense?

[Lchad]

Yes that makes sense.
Why don't you just declare a different content div with a different fixed width?
Not all my sites are cookie cutter either. Some will have a page or two that just don't work the same as a homepage or info page. Those pages will get a little different content div with different css to accommodate.

[moojoo]

Modify the damn css, thats what its for! =) Those templates are just a base not an end all solution. And flash will work if you do it right. I embed flash into divs every day. So pfffffffffffffft

[markus]

I've modified all the layouts I've found in as many ways as I could think and I can't get one layout that meets all my needs. I'd really like to go away from a table-based layout for accessiblity purposes, but I can't do that if I can't get a CSS-based layout that doesn't "break."

I know that I could have a different template for these "special" pages, that has a wider content div, but that seems a little absurd.

BTW, the issue isn't that it's flash. The issue is that it is a wide object. It could just as easily be an image or some other object.

I'll keep looking and post again if I find a solution. In the meantime, if there are any other suggestions I'd love to hear them.

[Lchad]

Well if you needed a larger table to place 4 photos side by side would you do it? Yes you would, so why wouldn't you use a larger div to accommodate your new needs.

I'm glad you are striving to use css that's awesome. You will at times need to amend a design to work around larger or smaller elements.

Hopefully you'll find what it is you are looking for..

[markus]

...if you needed a larger table to place 4 photos side by side would you do it? Yes you would...

Actually, I don't think I would have to. With a table-based layout, the table cell would "grow" to accommodate the 4 photos. With a div that has a set width, it wouldn't "grow" as needed.

[Lchad]

Ok... post a solution when you find it... I'm curious now!

[markus]

when you find it

if I find it I've been searching on and off for months to no avail . . . I'm pretty close to being convinced that it isn't possible.

[Lchad]

Even if you do find it I'm not convinced you should use it. Making visitors scroll right and left is not good design technique whether it's tables or div.

[Ryan Fait]

I agree... I never run into that problem because I design my sites to work in 800 by 600 browsers. I keep mine about 900 pixels wide and if you make me scroll horizontally, I will leave your site!

[galan98]

My CSS problem is a bit different.

I can design pages in styles rather than tables that come out just fine...until the user changes the text size, smaller or larger. one size up or one size down and my page layout get blown to pieces.

g.

[moojoo]

Then you aren't doing it right

[Ryan Fait]

Scary, moojooo

He's right, however. Sites should always work without breaking at two increases in text size. Three is better. Do you have a link to your site?

[galan98]

I'm sure there's a way to do it, and I'm hoping to learn that here.
I just tried this version, with the tables removed.

http://baseballposse.us/indexexperimental.htm

And thank you for your help.

g.