2005.03.01

Help me, please!

Comments

I whine, but I don’t necessarily want it plastered on my front lawn (at least, not anymore!)…

Okay, I’m about ready to cry here, so I’m going to call out to LazyWeb for some help. I really, really want to be able to create my new design’s layout in CSS and not have to use tables, but there seem to be things that CSS just can’t do (and which tables can do pretty trivially). Examples:

1) I want to have a three-column layout that maxes out at some arbitrary width (say, 1000 pixels). Columns two and three are fixed-width, and column one should fill all available space until the layout hits the limit, at which point the page should just extend to the right without recalculating the layout. Or, to describe in terms of tables, a left-aligned table with max-width: 1000px, second column fixed at 55px, third at 260px. Is this even possible to do?

More importantly:

2) I want the second column to be as tall as the entire page area so that I can draw a nice graphical element all the way down. It’s absolutely positioned so that I can align it with an elemnt in the banner area. Unbelievably, there doesn’t seem to be any way to do this! All the “height:100%” hacks I’ve seen out there only use the height of the browser window, which is no good.

CSS layout can’t be this broken, can it? Please tell me no, because I’m about ready to give up and go back to using tables (and you don’t want to see me cry, do you?)…


  • Ana

    I like the new look --and nice use of the flickr badge!

  • SB

    I hear your frustration (which I cannot help with at all) but I'm loving the look of this!

  • And that's fixed now...

    Now there are just a couple problems in IE (surprise!). Mostly, when I resize the browser window the banner stops getting thinner at a certain point and my page goes all wonky.

    Any tips?

  • Oh! So close! I can feel it now.

    Can anyone tell me why there's agap between the banner and the bottom div elements in test2 under firefox/mozilla?

  • Tables are a content device not a layout device...

    CSS isn't really so bad, but there are tricks. The only thing I hate is trying to center which is needlessly complicated. Vertical centering is just about impossible for variable length phrases.

  • Regardless of whether or not what you want can be done or not in CSS, I'd still have to say that it's broken ass. Anything that brings someone of your caliber to their knees ain't right, that's for sure.

    Why does everyone hate tables so much anyhow? I was fine with tables before css ever came along.

  • I'm still playing around with test2, so things might change there...

  • There are many choices of sites that discuss columns, although many times, the middle is the full height column.

    http://glish.com/css/7.asp

    http://www.alistapart.com/

    Basically I would float right two columns and then have your full-length column.

    Simple way:

    container div with width = 1000px

    right column with width = 260px and float right

    middle colum with width = 55px and float right

    then main column

    With the way css works, you will have to have your floats above your main content in your templates to use these easily.

    The one pixel thing is interpretation differences of borders and margins and usually require browser specific hacks.

  • Here's another one I tried, this time using floats, which does get the bar to extend (cause I cheated and used a background!) but it has other problems -- the background gets messed up in places and the alignment of the bar is sometimes off by 1px in IE depending on the width of the window. Also it forces me to put my links div above my entries, which I don't really want to do... but if that's a better starting point for a solution, I'd be glad to hear it too!

  • Well, it's still ugly, but the work-in-progress design is here -- basically, I want the middle column to extend all the way to the bottom... ?

  • Paul

    I gave up on being table free. I use CSS as much as possible. But I use good ole' tables when I need to manhandle the layout in a certain way (particularly forms where I want the label right aligned and the input left aligned on the same line). Fixed positioning in CSS has allowed me to eliminate futzing with frames for resident sidebars and headers.

  • This page/site may help out. It does a pretty good job of explaining the different ways to make a CSS layout.

    I can completely understand your frustration. Many times I've just given up on a redesign, because getting the columns to work how I wanted them to never really happens.

    Perhaps if you linked to a sample HTML page with your progress (just simple layout is fine), perhaps it'd be easier to suggest a trick or two. Good luck!

blog comments powered by Disqus

Powered by
Movable Type 5.2
neonepiphany dot com