0

Here's the fiddle: http://jsfiddle.net/nobosh/WrP8C/

What I'm trying to do is build a fluid table layout like GMAIL's inbox.

Where the .wrapper class shows as much content as possible based on the size of the window, but hides the rest.

The problem with the jsfiddle, is the table is growing outside of the outer div, which is breaking the page.

How can the table be prevented from growing outside the outer div, and the .wrapper width be as big as possible without breaking the outer div?

Thanks

AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
  • 5
    Tables are not meant to be used for layout purposes. – José Tomás Tocino Feb 07 '11 at 19:59
  • I think the better way of doing these kind of layouts is using a css framework like blueprint – Teja Kantamneni Feb 07 '11 at 20:03
  • I'd be curious how that'd work. Can you share an example forked from the fiddle? – AnApprentice Feb 07 '11 at 20:04
  • 2
    To be more specific: Tables are meant only for tabular data. If you are trying to style non-tabular data, and you use a table, you're doing it wrong. – zzzzBov Feb 07 '11 at 20:07
  • ok thanks, would love to hear a suggestion or to on how to take where I am and make it better? – AnApprentice Feb 07 '11 at 20:11
  • 1
    @zzzzBov mandatory reference http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Trufa Feb 07 '11 at 20:23
  • possible duplicate of [HTML - Given a Table, how to allow one column to be fluid without breaking the layout](http://stackoverflow.com/questions/4917767/html-given-a-table-how-to-allow-one-column-to-be-fluid-without-breaking-the-l) – Raúl Martín Jun 21 '15 at 19:22

2 Answers2

0

This should get you going:

http://www.jsfiddle.net/YLQcX/

(no table, just a simple HTML / CSS layout with overflow:hidden should do)

Hope it helps!

Trufa
  • 39,971
  • 43
  • 126
  • 190
  • thanks I appreciate you taking the time to fiddle. The only issue with this is it doesn't apply to the example provided in teh Question. Making a sinle DIV with text hide is very doable. The challenge is doing that when there are blocks inside the div which are all fixed, excluding one fluid DIV, .wrapper in this case, which we want to be hidden. Does that make sense? thxs – AnApprentice Feb 07 '11 at 21:08
  • @AnApprentice Oh sorry about that! I misunderstood your question! I still don't fully understand what you need! Sorry! I don't understand what is fixed and what is fluid, I am looking at gMail's inbox and still can't figure out what you mean... I'll be AFK 1 or two hours but maybe a (REALLY SIMPLE) diagram could help... – Trufa Feb 07 '11 at 21:30
0

AnApprentice, isn't this question basically a repeat of the question you asked the other day: HTML - Given a Table, how to allow one column to be fluid without breaking the layout

In which there is an CSS replacement suggestion to your question.

Community
  • 1
  • 1
Dan
  • 10,171
  • 7
  • 38
  • 31