homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
tables to css HELP!
Another 3 column problem, column height, fluid center width
omegaman66




msg:3603628
 2:49 am on Mar 18, 2008 (gmt 0)

OK. Everyone raves about CSS and bad mouths tables. So if I need help from some css gurus.

This is what I need.
1. A header section or just have the table positioned below non-changing content at the top of the page.
2. Three columns.
3. All columns the same length (all reach down as far as the longest).
4. Left and Right column fixed width.
5. Middle column varies in width depending on screen resolution or browser resize.
6. Footer section below the 3 columns.
7. And column length depends on content so just giving them a fixed height won't do.

I have found ways to make the column length equal regardless of content and I have found ways to make the center column a variable width depending on the browser size, but I have not been able to put the two together.

This is simple to do with tables. Is the possible with CSS?

 

annej




msg:3603667
 3:50 am on Mar 18, 2008 (gmt 0)

3. All columns the same length (all reach down as far as the longest).
and
7. And column length depends on content so just giving them a fixed height won't do.

These two are a lot more involved with CSS. Tables would be easier.

But I go with CSS and live with the uneven lengths as I find CSS so much more flexible in the long run.

fside




msg:3603787
 9:00 am on Mar 18, 2008 (gmt 0)

The fixed height thing is your problem. CSS simply doesn't support a simple expanding/contracting height layout as do HTML tables. You have to fix the heights and then allow for a scrollbar in each 'cell', if it goes too long. It's possible the next CSS spec will make it possible to do what tables do now, perhaps by trying to emulate the behavior of tables.

But yours is the classic question now - how to equalize columns without fixing the height. The answer is, you have to use script. There are a lot of different scripts. But you must use that as a workaround.

There's a limited way. If you knew the first column was always the tallest, you could position absolute and top for the other two, and set the width and margin - since you're fixing 1 and 3, you can fix 2 as easily. But in general, one isn't absolute, and the other two are (that or floated). It's that simple. You set one as being tallest. Let's say it's column 1. The footer would always sit just below column 1. So if col 2 or 3 became tallest . . It would break. And, again, you could set it up similarly if you knew 2 or 3 would always be tallest. I can't think of another way. Tables are your best bet, here.

But for sake of argument, this is just an example. It's set so we might assume the middle column, 2, will always be the tallest. And in addition, you'll also see that the style, width, for column 2 has to be different in IE (and Opera). This is set up for FF2. Another limitation.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS 'equal columns'</title>
<style>

.containdiv {
width: 100%;
display: block;
border: 1px solid #000;
background: #afa;
}

.col {
padding: 1em;
}

.col1 {
float: left;
width: 40%;
}

.col2 {
display: block;
width: 34%;
top: 0;
margin-left: 41%;
}

.col3 {
width: 20%;
position: absolute;
right: 0;
top: 0;
}

.ftr SPAN, .hdr SPAN {
display: block;
padding: 0.5em;
}

.hdr {
border-left: 1px solid #000;
border-top: 1px solid #000;
background: #ffa;
}

.ftr {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-top: none;
clear: left;
background: #ffa;
}

</style>
</head>
<body>
<div class="containdiv">
<div class="hdr">
<span style="text-align:center;">Header</span>
</div>
<div style="position:relative;width:100%;">

<span class="col col1">some text</span>

<span class="col col2">Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>

<span class="col col3">some text</span>

</div>

<div class="ftr">
<span style="text-align:center;clear:both;">Footer</span>
</div>

</div>
</body>
</html>

[edited by: SuzyUK at 10:28 am (utc) on Mar. 18, 2008]
[edit reason] examplified. [/edit]

SuzyUK




msg:3603791
 9:27 am on Mar 18, 2008 (gmt 0)

Hi omegaman66 and Welcome to WebmasterWorld!

>> Is the possible with CSS?
Yes quite easily

It's a very simple matter to get a footer to stay below three divisions (columns) of content, variable length or not. meeting your:
"3. All columns the same length (all reach down as far as the longest)"

What is it about the columns that you would consider equal or uneven?

The even heights thing, is that just a visual nicety for background or style purposes? because if it is what's wrong with faux columns, instead of scripting in a purely presentational idea.. even simple border "separation" of columns can be done with background images.

omegaman66




msg:3603833
 10:41 am on Mar 18, 2008 (gmt 0)

SuzyUK there is nothing wrong with using faux columns, that is actually how I tried to do it but I can't get the faux columns to work with the center column having an unfixed width.

I want to set up the first column to be 20 px from the left and 180 px wide and the third column 20 pixels from the right and 300 px wide. I have been able to get the 2nd column to have the correct width by using left margin and right margin to determine its size. But I haven't been able to incorporate that method with the faux columns.

fside




msg:3603846
 11:00 am on Mar 18, 2008 (gmt 0)

> method with the faux columns. <

The trick really was to get the footer to ride on the tallest column. I don't know if you understood that. As for spacing the center column, can't you just use percentages, instead, as was my example? That allows it to float. But if not, then can't you set left margin and right margin to your 200 and 320, respectively?

That is, in my example above, merely change the following:

.col1 {
width: 200px;
}

.col2 {
margin-left: 220px;
margin-right: 430px;
}

.col3 {
width: 400px;
}

Am I right, Omega Man? Yes?

But also because you use fixed columns, you'll notice the col 3 quickly cheat over onto and past column 2 as you shrink the window. Some the containing div should probably be min-width of at least 800, I would think.

omegaman66




msg:3603994
 1:54 pm on Mar 18, 2008 (gmt 0)

I want each column to be a different color. So your example although it looks like the columns are of equal height they aren't when you apply different colors to the columns.

But maybe I am missing something here. Can you make the different columns different colors? If not I can probably live with similiar color columns.

And the columns do not expand with added text.

SuzyUK




msg:3603995
 1:55 pm on Mar 18, 2008 (gmt 0)

The trick really was to get the footer to ride on the tallest column. I don't know if you understood that.

dunno if you're speaking to me or omegaman.. but the thing is your first code doesn't do that.. add enough text to make col3 the longest!

the 'trick' is to get the footer to ride on the tallest column yes, but without knowing what the tallest column is, so you use floats for all three columns and then make sure the floats are contained with a wrapper (much like a <tr> ;))

I'm going to start being unsemantic with my classnames for a bit but only to see if helps describe the relationship.. what CSS can't do is make a <td> (floated div) visually stretch to the same height as a <tr> (floatcontainer) - however place some backgrounds behind those float containers and you have it.

What I think you're missing here is source ordering (source ordering is not just for SEO! it's for design too..) and actually the semantics of <table> tags is how I'm going to try and explain how a CSS "Table" is more flexible that an actual one (when it comes to layouts that is ;))

If you float divs (td's) within a floated "wrapper" div (tr), the tr will contain the td's - so the simplest trick to containing all columns is to float all the cells/divs and wrap them in a floated parent tr/div - put the footer div (a colspanned tr) below and you're done.

The first limitation that most come across next is that they want a flexible center and fixed width sides so when trying to it with floats will usually try it like this:

col1 - float left - width: 200px
col2 - float left - width: 600px *****
col3 - float left - width: 200px

because the middle column float ***** needs a width on it or it will shrink to fit they cannot see how that 'center' column can floated yet still be a variable width

Now sure you can float the left col left and the right col right and let the content just sit stay in the middle with margins to clear, but then you not only have your content last in the source but have lost your three floated divs so you would then need to be sure the middle column was always the longest if your footer is still to work..

however floats are more flexible that that, floats can float all over the place even negatively back over themselves, then with a little extra thinking about the main wrapper divs (the "body" & "table")

a faux body wrapper div is still best for that extra layer of design flexibility although the real <body> can be just about be used

here is a "flexible floated" layout idea based on the requirements you gave omegaman66

CSS:

html, body {margin:0; padding:0; background: #fff; color: #000;}

#outerwrap {
width: 80%; /* optional if you want a 100% width, but this is where you center the whole layout if not 100%; */
margin: 0 auto; /* center if not 100% above */
border: 1px solid #000; /* just to show it wraps everything */
background: transparent url(leftside.jpg) repeat-y 0 0; /* 200px wide image repeating down behind container simulating left column */
}

#table {
background: transparent url(rightside.jpg) repeat-y 100% 0; /* 320px wide image repeating down behind inner container simulating right column */
margin: 0;
}

#header, #footer {background: #777; color: #fff; height: 40px; /* all adjustable */}

#tbody{
float: left;
width: 100%;
}

#maincontent {
margin: 0 340px 0 220px; /*Margins for content column. Should be enough to clear the right and left sides + a little extra for "whitespace" (or cellspacing) */
}

#leftcol{
float: left;
width: 160px; /* Width of left column in pixels */
padding: 0 20px; /* column now 200px wide to match left side faux column image */
margin-left: -100%; /* will float backwards over the full width of #tbody */
background: #cf9; /* this for demo only would be transparent to reveal the faux background */
}

#rightcol{
float: left;
width: 280px; /* Width of right column in pixels */
padding: 0 20px; /* column now 320px to match right side faux image */
margin-left: -320px; /*Set left margin to total of right column width it will float backwards */
background: #fe5; /* this for demo only would be transparent to reveal the faux background */
}

/*
remember total width of left and right columns are
width + left and right padding so allow for that with your image widths
if your images are fixed width adjust the columns widths/padding to suit
*/

</style>

HTML
<div id="outerwrap">
<div id="table">

<div id="header">header</div>

<div id="tbody">
<div id="maincontent">
<p>center column... center column</p>
</div>
</div>

<div id="leftcol">
<p>leftcol content</p>
</div>

<div id="rightcol">
<p>right right right</p>
</div>

<div id="footer">Footer Div Here</div>

<!-- //table --></div>
<!-- //outerwrap --></div>
</body>
</html>

I've used some familiar classnames ;) tbody and table to try and show that while a compromise maybe be being made for losing the actual <td> stretch, the gain should hopefully show there are actually less "containing" elements and more flexibility as the columns can be in any order or width (percentages can be used too) just by adjusting the CSS

by adjusting the widths margins and negative margins you move the columns around and to see the stretch you would then just change your background image/position on the "wrappers" to suit

-Suzy

omegaman66




msg:3604034
 2:24 pm on Mar 18, 2008 (gmt 0)

I can't see the left column at all!

SuzyUK




msg:3604171
 4:05 pm on Mar 18, 2008 (gmt 0)

not related, but I see I've forgotten to clear the head/footer

#header, #footer {
background: #777; color: #fff; height: 40px; /* all adjustable */
width: 100%;
clear: both;
}

........

Oh I see it or rather I don't.. in IE6?

good ol' hasLayout :o add width: 100% to the #table div

fside




msg:3604232
 4:52 pm on Mar 18, 2008 (gmt 0)

No, it stuck to column 2. That was the limitation. It breaks if col 1 or col 3 become the tallest. That was the whole point. It was explained in detail. It was a hack. And as I say, it was limited. Column 2 always had to be the tallest. But you could have made it column 1 or 3. But then that would always have to be tallest.

> column to be a different color <

Omega Man, CSS can't do that. These were three unequal columns placed over a common background. As long as column 2, in this example (but you could set it to 1 or 3 as explained) was the tallest, it would give the appearance of a table expanding and contracting with the text. But the 'trick' would be revealed by coloring in each column. The short columns simply don't go flush to the bottom.

It's a problem, among many, with CSS. Crockford is heard to say in one of his yahoo/theater lectures that they should come up with something to replace CSS (maybe it was just frustration, that day). But I think he was getting at a problem with understanding the purposes people put it to, and just what sort of problems need solving, and how. It's a matter of picking the right framework and primitives, for a standards body, anyway, as W3C is attempting to be. There's going to be overlap between presentation and content. But perhaps W3C needs to rethink some things about just what CSS ought to be.

But, you still have tables. Again, sometimes the CSS might outshine them. But you picked the classic case, here. It's all over the web. And here, gotta go with tables.

And nothing wrong with tables.

[edited by: engine at 5:21 pm (utc) on Mar. 18, 2008]
[edit reason] TOS [/edit]

fside




msg:3604370
 6:57 pm on Mar 18, 2008 (gmt 0)

That first paragraph was a reply to

> your first code doesn't do that <

That was edited out. The fact is, it did what I said it did. If it does break, it WOULD break in fact in column 1 or 3. It's just a hack. It's limited. It shows that all this stuff CAN be done, in some fashion. But CSS is still lacking. And these hacks can easily break.

omegaman66




msg:3604396
 7:14 pm on Mar 18, 2008 (gmt 0)

Columns can be made different colors but some other aspect breaks. I guess I can't have it all. Oh well back to what I know best anyway... tables.

>And nothing wrong with tables.< haha I agree but for some reason a lot of people get real anal about using tables for layout purposes.

SuzyUK




msg:3604415
 7:36 pm on Mar 18, 2008 (gmt 0)

I think there's small misunderstanding going on here but omegaman can correct us if we're wrong

I took it from his OP description, and his subsequent post that he'd tried faux columns, that he was already trying to get the footer based on the 'any column longest' scenario

his later post which actually overlapped with my own states:
And the columns do not expand with added text.

I did not see that before I posted the "it doesn't work" reply, I had already assumed that he wanted physical (not visual) column stretch, whereby any column controls the footer.. you wouldn't try faux columns otherwise? - if your center column is always longest there are other ways to get that effect (nested floats)

The "faux columns" will not work with your way (unless any one column is always the longest) but they will with mine, but neither way will do the full column background color without an image, because divs are not table cells! - it's not a competition nor is it a 'hack' it's filling a need until Grid Positioning (CSS3) is supported, Table properties are now supported in IE8 so I guess that one'll will do next ;) in fact it may well help! - until it comes along there are many ways to achieve things and one way will not suit all

CSS is not lacking it offers more choices and flexibility, perhaps it just doesn't tick everyone's boxes all at the same time.. but then neither does a table (you can't flip the order of table columns at the change of a margin can you?) - I simply offered another choice, if it's not the right one, it won't be the first time and likely won't be the last, at least I strive to show that at least choices exist ..

-Suzy

<added> sorry they didn't work for you omegaman..
"I can't have it all"

about sums up the whole debate.. CSS is not a magic bullet, and remember not all of us get 'anal' about it - you might want to check out a couple other recent threads here, to see some posts which might help through the transition phase?

[edited by: SuzyUK at 7:42 pm (utc) on Mar. 18, 2008]

omegaman66




msg:3604595
 11:12 pm on Mar 18, 2008 (gmt 0)

Just incase... I wasn't trying to point fingers about anyone here about the tables vs css comment.

fside




msg:3604882
 4:27 am on Mar 19, 2008 (gmt 0)

> any one column is always the longest <

I've said that, repeatedly. That's how it works, picking one column that you know will be the tallest.

> nor is it a 'hack' <

Of course it is. CSS doesn't support this as it should.

> it's filling a need <

That's what I'VE been saying, repeatedly. This idea of a 'grid' goes way back. Millenia. What you need is something that can produce such 'grids'. CSS can't. We'll see what they suggest in future, even more perhaps what some frustrated browser makers might do (knowing they'll be creating yet another 'version' to identify).

But it has to go to what exactly IS presentation, what IS structure/content. There's overlap. There's no careful mutual exclusivity. But I would prefer, myself, to see this a little more exclusive. I'd like to see an outline, a hierarchy, rendered as a table, by CSS, not by script. Heck, I'd be happy if IE or Opera ever discover rounded-corners.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved