Columns

Discussion in 'HTML' started by Tim W, Jun 22, 2012.

  1. Tim W

    Tim W Guest

    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
    Tim W, Jun 22, 2012
    #1
    1. Advertising

  2. Tim W

    dorayme Guest

    In article <js1ckf$1iv$>,
    Tim W <> 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
    dorayme, Jun 22, 2012
    #2
    1. Advertising

  3. Tim W

    Tim W Guest

    On 22/06/2012 11:56, dorayme wrote:
    > In article <js1ckf$1iv$>,
    > Tim W <> 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
    Tim W, Jun 22, 2012
    #3
  4. Tim W

    richard Guest

    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".
    richard, Jun 22, 2012
    #4
  5. Tim W

    Tim W Guest

    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
    Tim W, Jun 22, 2012
    #5
  6. Tim W

    dorayme Guest

    In article <js1ooh$3cp$>,
    Tim W <> wrote:

    > On 22/06/2012 11:56, dorayme wrote:
    > > In article <js1ckf$1iv$>,
    > > Tim W <> 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
    dorayme, Jun 22, 2012
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. helpful sql
    Replies:
    0
    Views:
    807
    helpful sql
    May 19, 2005
  2. Replies:
    5
    Views:
    591
  3. Replies:
    4
    Views:
    933
  4. =?Utf-8?B?YmVub2l0?=

    Read CSV - string Columns - Int columns

    =?Utf-8?B?YmVub2l0?=, May 8, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    431
    =?Utf-8?B?YmVub2l0?=
    May 8, 2006
  5. Jacksm
    Replies:
    2
    Views:
    846
    Paul Chalekian
    Nov 21, 2006
Loading...

Share This Page