Columns

[Tim W]

I am doing a page atm and I want to have short sections of content
arranged in columns across the page. Like this,
http://cheesetoast.co.uk/demos/responsive.html
or like this four column version
http://fourcowfarm.com/
Probably I will use two tiers of three columns. All the widths on the
page are in % (with max & min) so that it can be viewed at different widths.

I looked excitedly under Columns in my html5 manual until I read that
columns are not supported by ie . That's the end of that then.

Currently on my prototype I have an elaborate system of three floated
'section' elements which seems to work but when I look at it this
morning it troubles me as maybe not robust.

The fourcowsfarm site seems to use an 'ul' with each section as a 'li'.
I don't relish having to grapple with that.

I could use a table. But it isn't tabular data.

So that's four approaches, none of them obviously 'correct' and I don't
have the experience to know which one might be best. Do you blokes have
any worthwhile opinions ?

Tim W

 

[dorayme]

Currently on my prototype I have an elaborate system of three floated
'section' elements which seems to work but when I look at it this
morning it troubles me as maybe not robust.

Post a URL to this and we can discuss it.

 

[Tim W]

Post a URL to this and we can discuss it.

Thanks. I don't know if I can upload it anywhere today but maybe. Do I
understand from your response that in principle this could be a
perfectly good technique?

Tim w

 

[richard]

I am doing a page atm and I want to have short sections of content
arranged in columns across the page. Like this,
http://cheesetoast.co.uk/demos/responsive.html
or like this four column version
http://fourcowfarm.com/
Probably I will use two tiers of three columns. All the widths on the
page are in % (with max & min) so that it can be viewed at different widths.

I looked excitedly under Columns in my html5 manual until I read that
columns are not supported by ie . That's the end of that then.

Currently on my prototype I have an elaborate system of three floated
'section' elements which seems to work but when I look at it this
morning it troubles me as maybe not robust.

The fourcowsfarm site seems to use an 'ul' with each section as a 'li'.
I don't relish having to grapple with that.

I could use a table. But it isn't tabular data.

So that's four approaches, none of them obviously 'correct' and I don't
have the experience to know which one might be best. Do you blokes have
any worthwhile opinions ?

Tim W

that's nothing more than "floating" divisions.
You want two identical rows. So give each "column" the same class name.
Like col1, col2, col3.
That way your css will show the divisions as intended,
In the second row, and at any new row, you'll need to apply a
"float:clear;".
The simplest way to do that is between the rows insert <div
style='clear:left;'></div>. With no content inside the tags.

Nothing wrong with "<ul>" except for some things the css gets a tad
trickier. Plus there is a limit as to what can be placed inside a "li".

 

[Tim W]

that's nothing more than "floating" divisions.
You want two identical rows. So give each "column" the same class name.
Like col1, col2, col3.
That way your css will show the divisions as intended,
In the second row, and at any new row, you'll need to apply a
"float:clear;".
The simplest way to do that is between the rows insert <div
style='clear:left;'></div>. With no content inside the tags.

Nothing wrong with "<ul>" except for some things the css gets a tad
trickier. Plus there is a limit as to what can be placed inside a "li".

Yeah, telling me! Those menu bars which are 'ul's are a shortcut to
dementia. I never know if I have to apply a style to the a , the li, the
ul or the div and then you have to deal with the strange display:inline;
and display:block; and the incomprehensible display:inline-block. It's
an easy way to waste an otherwise useful afternoon.

But anyway, I think I have mastered the 3-col floating system and the
'clear' declaration so maybe I will stick with it. thanks for the tips.

Tim W

 

[dorayme]

Thanks. I don't know if I can upload it anywhere today but maybe. Do I
understand from your response that in principle this could be a
perfectly good technique?

Perhaps nothing with web pages can be actually perfect, there being
too many demands, but it is perfectly sensible to use floats and all
modern browsers handle them well enough. Your requirements are very
important in this and how it is done determines the robustness, (you
were expressing concern about this latter), hence the URL suggestion.

If you don't mind the lack of wrapping when browser windows get thin,
and otherwise you want perfect robustness, an html table is very hard
to beat, it will work over many more browsers going way back and the
intelligence built into the element, its internal natural fluidity,
makes this still a very tempting choice.

HTML5 offers a fig leaf for you regarding semantic sinning, you add
role="presentation" (like crossing your fingers behind your back when
making a promise! <g>).

Perhaps this is an unkind representation by me. I would not hesitate
to use a table anyway if I was having too much difficulty getting what
I wanted otherwise but I have long since spoilt my chances of getting
into heaven.

If you can design so that your pages are nice enough in major
browsers, that is great. Much less important is that your pages should
always behave exactly the same. With this in mind, you have many
choices.