How to create a multiple-row section with auto-sized columns

Still learning CSS so pardon if this is obvious -

I am building a header that will contain four sections:

|Header-------------------------------|  
|----Title----|----NavigationLinks----|  
|----Taglines-|----SelectionBar-------|
|-------------------------------------|

What I would like is for the Taglines section to automatically set the width of the first column (it's content is longer than the title) and then the second column extends to the end of the header section. I can't figure out how to get the columns to match each other without setting specific widths - is it possible to do this without fixed-width areas?

I've been able to come close to what I need using display: table-cell; but can't figure out how to 'connect' the second row to the first.

UPDATE: Missing a tag caused the div's to ignore the display: table* settings. Using display: table/table-row/table-cell to create a table layout would do what I needed: table-cell will auto stretch the column affecting the width of the rows above it.

2012-04-04 20:50
by owlie

And what's your mark-up? What's your CSS? Where's your demo to show us your problem, and what you've tried.. - David Thomas 2012-04-04 20:53

Set up a demo or post some code and we'll have a loo - SpaceBeers 2012-04-04 20:56

Not sure if this is kind of what you're looking for. Question seemed a bit unclear.

http://jsfiddle.net/KacPY/1/

2012-04-04 20:57
by Christopher Marshall

yes - almost. I needed something where I wouldn't have to use a fixed width. So a layout that would function like a element - where columns resize as needed. Like this link The dispaly:table does this fine - I had an error and it looked like that wasn't the behavior - owlie2012-04-05 20:30

Updated the jsfiddle link. Just like @Dominik M's answer, use percentage based widths - Christopher Marshall 2012-04-05 20:39

Instead of using outdated tables I would consider notating your widths in percent in order to have a fluid layout.

http://jsfiddle.net/kJRQE/

2012-04-05 20:31
by Dominik M.

Ads