Hello all. I use CSS for all my layouts, but there's one thing that I've never been able to work our an elegant solution for. How do I achieve the layout using tables shown below using CSS only;
So you'll see an element, in this case the logo, at the far right hand side which will contract as the window is made smaller until the window is 1000px wide, after which the logo doesn't go any further and horizontal scroll bars appear. So a 100% div but with a minimum width specified. And yes, it has to work in IE...
All the styles necessary are already in your code, it just takes a change in thinking to realize it. All the cellspacing/cellpadding/border declarations can go away. Your outer table, if turned into a div, is implicitly 100% wide. Your align=right declarations can be moved into CSS, as can your width. The only new thing is float:right on the inner div & a declaration of the height.
Thanks, that works. Sure I tried it before though! I think perhaps I tried it with an absolutely positioned wrapper and that somehow didn't work. Your version is fine though, cheers.
To achieve true liquid CSS1 you must never apply borders, margins, and or padding to the parent element, only width. To give padding to the parent you don't actually give the parent padding, instead you give it's first child margins. Repeat for all parent/child elements.
JAB Creations wrote:To achieve true liquid CSS1 you must never apply borders, margins, and or padding to the parent element, only width.
Not sure what you're talking about. It's perfectly fine to apply both a width, borders, margins and/or paddings to an element and have it fluid.
Maybe you'd have to deal with some box-model bugs in some ancient pre-historic browsers, if you're so unlucky you have to support those, but that's another story.
The layout you're speaking about doesn't take borders in to consideration. I haven't seen anyone use anything like border-width: 1%; because even then you'd end up with 10pixel borders on both sides @ 1024x768 for example. So I'm taking borders in to consideration whereas your layout doesn't utilize borders.
So having pixel-perfect control over a liquid layout would require the approach I mentioned. If you're making minor changes in background-color it's different though and I can visualize a layout with background-colors versus borders to make each section of the page distinct.