3 divs side-by-side?

Discussion in 'HTML' started by theo, Feb 10, 2005.

  1. theo

    theo Guest

    Cheers,
    What is the acceptable fashion for putting 3 divs side-by-side? I've seen
    examples in horizontal menus, and they all were float:left; so that they all
    were riding up against each other. Example below, left and mid were floated
    left, and the right box floated to the right. Seems to work this way also,
    but is this kosher? Is all float:left best?
    Thanks,
    cc

    #left {
    margin: 0% .1%;
    padding:0;
    height:81px;
    width:20%;
    float:left;
    border:1px solid #000000;
    text-align:center;
    }

    #mid {
    margin:0% 0%;
    padding:0;
    height:81px;
    float:left;
    width:59%;
    border:1px solid #000000;
    text-align:center;
    }

    #right {
    margin:0% .1%;
    padding:0;
    height:81px;
    width:20%;
    float:right;
    border:1px solid #000000;
    text-align:center;
    }
    theo, Feb 10, 2005
    #1
    1. Advertising

  2. theo wrote:
    > Cheers,
    > What is the acceptable fashion for putting 3 divs side-by-side?


    A quick search of google for CSS layout would reward you with several
    code examples.

    --
    -=tn=-
    Travis Newbury, Feb 10, 2005
    #2
    1. Advertising

  3. theo

    Richard Guest

    On Thu, 10 Feb 2005 10:23:24 -0600 theo wrote:

    > Cheers,
    > What is the acceptable fashion for putting 3 divs side-by-side? I've
    > seen
    > examples in horizontal menus, and they all were float:left; so that
    > they all
    > were riding up against each other. Example below, left and mid were
    > floated
    > left, and the right box floated to the right. Seems to work this way
    > also,
    > but is this kosher? Is all float:left best?
    > Thanks,
    > cc


    search for "CSS the holy grail".
    You'll get a good example of how to do it correctly.

    The use of "float:left" seems to be more common than "float:right".
    Although either is appropriate. It's just a matter of how you place your
    content.
    Using left, you'll see an output like 1....2....3.
    Using right, you're output would be 3.....2.....1

    If you want to put another division below those 3 columns, then you'll need
    to terminate the floating.
    That can be done easily with <br clear="both">
    Or in the ending division, "clear:both".
    Richard, Feb 10, 2005
    #3
  4. theo

    Andy Dingley Guest

    On Thu, 10 Feb 2005 10:23:24 -0600, "theo" <> wrote:

    > What is the acceptable fashion for putting 3 divs side-by-side?


    Generally something derived from glish.com or BlueRobot's examples.


    BTW - I'd suggest using a class as the identifier in the HTML, to
    attach the CSS, rather than an id. You can use both class and id in
    the HTML, but the CSS should refer to the class alone.

    ..left-column { ... }

    ..body-text { ... }

    ..right-column { ... }

    If you make the CSS refer to an id at the high level pf the page
    structure, that's a very "strong" binding. It can make it harder to
    have small sections of CSS applying to sub-sections inside this.
    Instead of simply using a class like this
    <ul class="foo" > <li>...
    and
    ul.foo li { ... }

    You would need to qualify the CSS including the id used in the top
    level as well
    #body-text ul.foo li { ... }

    This makes it harder to modularise and re-use your CSS between sites.
    --
    Smert' spamionam
    Andy Dingley, Feb 10, 2005
    #4
  5. theo

    rf Guest

    "Travis Newbury" <> wrote

    > A quick search of google for CSS layout would reward you with several


    thousand

    > code examples.
    rf, Feb 10, 2005
    #5
  6. theo

    rf Guest

    "Richard" <Anonymous@127.001> wrote

    > If you want to put another division below those 3 columns, then you'll

    need
    > to terminate the floating.


    Wrong terminology. One does not "terminate" the float, one is, to quote the
    reccomendations, "controlling the flow next to the float". "Terminating" the
    float might imply that it would continue if not "terminated". This is simply
    not the case.

    > That can be done easily with <br clear="both">


    Do you simply make this stuff up as you go RtS?

    If you do then this may explain how you can get it so invariably wrong.

    Go over to the W3C reccomendations and discover that the possible values for
    the *deprecated* clear attribute are none|left|right|all. Nowhere is 'both'
    mentioned,.

    > Or in the ending division, "clear:both".


    One can only presume you actually meant this to be inside a style attribute.
    If you did then why didn't you bloody say so?

    Theo: Do not ever pay any attention to RtS. He is *always* wrong.
    rf, Feb 10, 2005
    #6
  7. theo

    Richard Guest

    On Thu, 10 Feb 2005 22:22:18 GMT rf wrote:

    > "Richard" <Anonymous@127.001> wrote


    >> If you want to put another division below those 3 columns, then you'll

    > need
    >> to terminate the floating.


    > Wrong terminology. One does not "terminate" the float, one is, to quote
    > the
    > reccomendations, "controlling the flow next to the float".
    > "Terminating" the
    > float might imply that it would continue if not "terminated". This is
    > simply
    > not the case.


    >> That can be done easily with <br clear="both">


    > Do you simply make this stuff up as you go RtS?


    > If you do then this may explain how you can get it so invariably wrong.


    > Go over to the W3C reccomendations and discover that the possible
    > values for
    > the *deprecated* clear attribute are none|left|right|all. Nowhere is
    > 'both'
    > mentioned,.


    >> Or in the ending division, "clear:both".


    > One can only presume you actually meant this to be inside a style
    > attribute.
    > If you did then why didn't you bloody say so?


    > Theo: Do not ever pay any attention to RtS. He is *always* wrong.



    Although the usage of either method has been deprecated, how do you go about
    telling older browsers, let alone new ones, not to use it?

    If said usage of a deprecated item validates, then how does that bolster
    your claims?

    As I am always wrong, then you are by far the world's greatest expert on the
    subject.
    Richard, Feb 11, 2005
    #7
  8. theo

    rf Guest

    "Richard" <Anonymous@127.001> wrote

    > On Thu, 10 Feb 2005 22:22:18 GMT rf wrote:


    > >> That can be done easily with <br clear="both">


    > > Do you simply make this stuff up as you go RtS?


    > >> Or in the ending division, "clear:both".

    >
    > > One can only presume you actually meant this to be inside a style
    > > attribute.


    > > Theo: Do not ever pay any attention to RtS. He is *always* wrong.

    >
    >
    > Although the usage of either method


    And just which "method" are you talking about. It appears, from your
    inadequate trimming, that you are referring to my advice to Theo. Sound
    advice it is, too :)

    I will assume you are in fact talking about clear="all" vs clear: both;

    > has been deprecated, how do you go about
    > telling older browsers, let alone new ones, not to use it?


    I simply can not understand what you are talking about. Why do you need to
    tell a browser any bloody thing? Its the code that contains the deprecated
    attribute, not the browser. Also, why would anybody try to tell a browser
    not to use anything? This is why it is deprecated, so it still exists for
    legacy pages. Doesn't mean it should, or even may, be used for new pages
    though.

    And besides, only the clear attribute is deprecated, not the clear property.

    > If said usage of a deprecated item validates,


    Usage of a deprecated attribute (not item) does *not* validate, not when one
    uses the recommended doctype.

    > then how does that bolster
    > your claims?


    They are not claims, they are facts straight out of the W3C recommendations
    and they don't *need* to be bolstered.

    > As I am always wrong,


    <loud cheering/> Ah, at last, a correct statement.

    > then you are by far the world's greatest expert on the
    > subject.


    *Anybody* could be considered an expert on the subject when posting to the
    same thread as you :)
    rf, Feb 11, 2005
    #8
    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. rich
    Replies:
    0
    Views:
    721
  2. Mike P
    Replies:
    7
    Views:
    917
  3. Sam Takoy

    side-by-side divs

    Sam Takoy, Aug 25, 2010, in forum: HTML
    Replies:
    4
    Views:
    1,137
    dorayme
    Aug 26, 2010
  4. Yobbo

    2 Divs side-by-side causing me grief

    Yobbo, Nov 11, 2006, in forum: ASP General
    Replies:
    3
    Views:
    184
    Evertjan.
    Nov 12, 2006
  5. maya
    Replies:
    4
    Views:
    240
Loading...

Share This Page