Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Columns

Reply
Thread Tools

Columns

 
 
Tim W
Guest
Posts: n/a
 
      06-22-2012
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

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      06-22-2012
In article <js1ckf$1iv$(E-Mail Removed)>,
Tim W <(E-Mail Removed)> wrote:

> 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.

--
dorayme
 
Reply With Quote
 
 
 
 
Tim W
Guest
Posts: n/a
 
      06-22-2012
On 22/06/2012 11:56, dorayme wrote:
> In article <js1ckf$1iv$(E-Mail Removed)>,
> Tim W <(E-Mail Removed)> wrote:
>
>> 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.
>

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

 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      06-22-2012
On Fri, 22 Jun 2012 10:07:28 +0100, Tim W wrote:

> 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".
 
Reply With Quote
 
Tim W
Guest
Posts: n/a
 
      06-22-2012
On 22/06/2012 20:58, richard wrote:
> On Fri, 22 Jun 2012 10:07:28 +0100, Tim W wrote:
>
>> 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".
>


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

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-22-2012
In article <js1ooh$3cp$(E-Mail Removed)>,
Tim W <(E-Mail Removed)> wrote:

> On 22/06/2012 11:56, dorayme wrote:
> > In article <js1ckf$1iv$(E-Mail Removed)>,
> > Tim W <(E-Mail Removed)> wrote:
> >
> >> 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.
> >

> 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.

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Align table columns with gridview columns Jacksm ASP .Net 2 11-21-2006 09:49 PM
Read CSV - string Columns - Int columns =?Utf-8?B?YmVub2l0?= ASP .Net 0 05-08-2006 02:11 PM
database columns vs. gui columns and sorting ittay.dror@gmail.com Java 5 03-04-2006 10:48 AM
CSS columns problem - faux columns don't work henrybranson@hotmail.com HTML 4 11-24-2005 10:05 AM
convert rows to columns and columns to rows helpful sql ASP .Net 0 05-19-2005 06:03 PM



Advertisments