Two columns with <div> tags

Discussion in 'HTML' started by Joshua Beall, Apr 7, 2004.

  1. Joshua Beall

    Joshua Beall Guest

    Hi All,

    I have two columns, floated left and right, like so:

    <div style="float: left; width: 50%;">
    Lorem ipsum
    </div>
    <div style="float: right; width: 50%;">
    dolor sit amet
    </div>

    Now, this works ok to create two columns, but I run into trouble as soon as
    I tried and add padding or margin to either <div>; one column will jump down
    below the other. I can compensate for this, to some extent, by changing the
    width from 50% to something slightly less, like 48%, but I assume that is
    not really how to do this.

    What should I be doing, in order to get a two adjacent columns, that will
    grow or shrink with the page?
    Joshua Beall, Apr 7, 2004
    #1
    1. Advertising

  2. Joshua Beall

    Steve Pugh Guest

    "Joshua Beall" <> wrote:

    >I have two columns, floated left and right, like so:
    >
    ><div style="float: left; width: 50%;">
    > Lorem ipsum
    ></div>
    ><div style="float: right; width: 50%;">
    > dolor sit amet
    ></div>
    >
    >Now, this works ok to create two columns, but I run into trouble as soon as
    >I tried and add padding or margin to either <div>; one column will jump down
    >below the other.


    Because 50% + 50% + padding = more than 100%.

    >I can compensate for this, to some extent, by changing the
    >width from 50% to something slightly less, like 48%, but I assume that is
    >not really how to do this.


    It's exactly how to do it.

    Or, don't set any margins or padding on the column divs, but set them
    on other elements. e.g. instead of setting padding, set margins on the
    paragraphs inside the divs.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Apr 7, 2004
    #2
    1. Advertising

  3. Joshua Beall

    Joshua Beall Guest

    "Steve Pugh" <> wrote in message
    news:...
    > Because 50% + 50% + padding = more than 100%.


    Well, that turns out to be the way things are summed, but in my world, it
    should be taking the padding out of the 50% that I assigned. Obviously my
    world does not have much clout, eh? :)


    The problem is, if I set the widths to 48%, then that means I have left 2%
    for padding. But I want to assign an explicit pixel value for padding, say,
    5px. So, everything is all peachy as long as 2% of the width is >= 5px.
    But, if the browser window shrinks too much, then 2% of the parent element
    for my <div>'s might drop below 5px.

    > Or, don't set any margins or padding on the column divs, but set them
    > on other elements. e.g. instead of setting padding, set margins on the
    > paragraphs inside the divs.


    This would work, but I had been hoping that I would not have to worry about
    an extra level of tags inside those <div>'s. That's a no-go, eh?
    Joshua Beall, Apr 7, 2004
    #3
  4. Joshua Beall

    Kris Guest

    In article <>,
    Steve Pugh <> wrote:

    > Or, don't set any margins or padding on the column divs, but set them
    > on other elements. e.g. instead of setting padding, set margins on the
    > paragraphs inside the divs.


    Which is often why I find HTML4.01 Strict so nice. For a lot of elements
    it is required to be more specific:

    In HTML4.01 Transitional you could do
    <blockquote>
    Veni vidi vici
    </blockquote>

    In HTML4.01 Strict it has to be something like
    <blockquote>
    <p>
    Veni vidi vici
    </p>
    </blockquote>

    All these extra CSS hooks, all for free!

    --
    Kris
    <> (nl)
    <http://www.cinnamon.nl/>
    Kris, Apr 7, 2004
    #4
  5. Joshua Beall

    Steve Pugh Guest

    "Joshua Beall" <> wrote:
    >"Steve Pugh" <> wrote in message
    >news:...
    >> Because 50% + 50% + padding = more than 100%.

    >
    >Well, that turns out to be the way things are summed, but in my world, it
    >should be taking the padding out of the 50% that I assigned. Obviously my
    >world does not have much clout, eh? :)


    Microsoft agreed with you. IE4 implemented width as being from outside
    edge of border. The CSS spec defines width as being the width of the
    content (i.e from the inside edge of the padding). This incorrect
    behaviour exists in IE5 and 5.5 as well. In IE6 it depends on whether
    you trigger standards or quirks mode.

    CSS3, if implemented as per the current thinking, will allow authors
    to choose between the two models and some browsers already support
    this (either via the proposed CSS3 properties or via custom
    properties).

    >The problem is, if I set the widths to 48%, then that means I have left 2%
    >for padding. But I want to assign an explicit pixel value for padding, say,
    >5px. So, everything is all peachy as long as 2% of the width is >= 5px.
    >But, if the browser window shrinks too much, then 2% of the parent element
    >for my <div>'s might drop below 5px.


    Yes, mixing different units can cause problems.

    >> Or, don't set any margins or padding on the column divs, but set them
    >> on other elements. e.g. instead of setting padding, set margins on the
    >> paragraphs inside the divs.

    >
    >This would work, but I had been hoping that I would not have to worry about
    >an extra level of tags inside those <div>'s. That's a no-go, eh?


    Depending on the content of your divs you probably should have extra
    elements in there anyway. If you have headings, lists, paragraphs,
    tables, etc. then they should always be marked up with the proper
    HTML. So what do you have in your divs that doesn't fall into the
    categories covered by the standard HTML elements?

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Apr 7, 2004
    #5
  6. Joshua Beall

    Joshua Beall Guest

    "Steve Pugh" <> wrote in message
    news:...
    > Depending on the content of your divs you probably should have extra
    > elements in there anyway. If you have headings, lists, paragraphs,
    > tables, etc. then they should always be marked up with the proper
    > HTML. So what do you have in your divs that doesn't fall into the
    > categories covered by the standard HTML elements?


    I did not say I *should* be doing it that way. I was just hoping I could
    get away with it ;-)
    Joshua Beall, Apr 7, 2004
    #6
  7. Joshua Beall

    Richard Guest

    "Joshua Beall" <> wrote in message
    news:gc_cc.10483$...
    > Hi All,
    >
    > I have two columns, floated left and right, like so:
    >
    > <div style="float: left; width: 50%;">
    > Lorem ipsum
    > </div>
    > <div style="float: right; width: 50%;">
    > dolor sit amet
    > </div>
    >
    > Now, this works ok to create two columns, but I run into trouble as soon

    as
    > I tried and add padding or margin to either <div>; one column will jump

    down
    > below the other. I can compensate for this, to some extent, by changing

    the
    > width from 50% to something slightly less, like 48%, but I assume that is
    > not really how to do this.
    >
    > What should I be doing, in order to get a two adjacent columns, that will
    > grow or shrink with the page?
    >



    If you only want two columns, remove the float:right; as it ain't necessary.
    Reduce your percentage so that the two equal just less than 100% or it will
    drop down.
    Or, set a 3rd division to a defined width and height, and let it hold the
    two columns instead of the page.
    Richard, Apr 8, 2004
    #7
  8. Joshua Beall

    Bob Long Guest

    In news:dz_cc.10607$,
    Joshua Beall <> typed:
    > "Steve Pugh" <> wrote in message
    > news:...
    > > Because 50% + 50% + padding = more than 100%.

    >
    > Well, that turns out to be the way things are summed, but in my
    > world, it should be taking the padding out of the 50% that I
    > assigned. Obviously my world does not have much clout, eh? :)


    This may help:
    http://www.w3.org/TR/REC-CSS1#formatting-model

    Bob Long
    Bob Long, Apr 8, 2004
    #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. Chris

    table-tags within div-tags

    Chris, Feb 9, 2004, in forum: HTML
    Replies:
    5
    Views:
    13,263
    Chris
    Feb 10, 2004
  2. Jimmy
    Replies:
    7
    Views:
    4,916
    Chaddy2222
    Nov 21, 2008
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    741
  4. MISS CHIEVOUS
    Replies:
    51
    Views:
    2,068
    MISS CHIEVOUS
    Apr 19, 2009
  5. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    182
    David Dorward
    Jun 1, 2005
Loading...

Share This Page