css problem (float)

Discussion in 'HTML' started by Deephay, Sep 5, 2007.

  1. Deephay

    Deephay Guest

    Greetings all,

    I am currently writting a 3-column full-width webpage, I have a layout
    problem, here is demo of the page:

    <html>
    <body>
    <div style="float: left; width: 25%; border-right: 1px
    dashed; min-height: 20em; padding: 1em"><p>test testtest test test
    test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test
    test</p></div>
    <div style="float: right; width: 25%; border-left: 1px
    dashed; min-height: 20em; padding: 1em">test test test test test test
    test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test
    test test test test test test test test test test test test test test
    test </div>
    <div style="border: 1px solid">content content content
    content content content content content content content content
    content content content content content content content content
    content content content content content content content content
    content content content content content content content content
    content content content content content content content content
    content content content content content content content content
    content content content content</div>
    </body>
    </html>

    I have three columns (<div>), the width of the middle column (the last
    <div>) will equal to 100% of the body width (according to CSS spec.),
    but the content in that <div> will be put into the spaces between the
    left and right floats according to the CSS spec, my problem is: some
    times my CMS system will put a <table width="100%"><tr><td
    align="center">content</td></tr>, this will break the layout of the
    page because the middle column is not (100% - 2 x %25) but 100% and
    the table width will be 100% either.

    Specify the width of the middle column direcly in the stylesheet (45%,
    say) will help, but I am not sure whether it is a good idea.

    Any suggestion is very much appreciated. TIA!

    Cheers,
    Deephay
    Deephay, Sep 5, 2007
    #1
    1. Advertising

  2. Deephay

    dorayme Guest

    In article
    <>,
    Deephay <> wrote:


    > I have three columns (<div>), the width of the middle column (the last
    > <div>) will equal to 100% of the body width (according to CSS spec.),
    > but the content in that <div> will be put into the spaces between the
    > left and right floats according to the CSS spec, my problem is: some
    > times my CMS system will put a <table width="100%"><tr><td
    > align="center">content</td></tr>,


    Put a table where?

    --
    dorayme
    dorayme, Sep 5, 2007
    #2
    1. Advertising

  3. Deephay

    Deephay Guest

    On Sep 5, 2:07 pm, dorayme <> wrote:
    > In article
    > <>,
    >
    > Deephay <> wrote:
    > > I have three columns (<div>), the width of the middle column (the last
    > > <div>) will equal to 100% of the body width (according to CSS spec.),
    > > but the content in that <div> will be put into the spaces between the
    > > left and right floats according to the CSS spec, my problem is: some
    > > times my CMS system will put a <table width="100%"><tr><td
    > > align="center">content</td></tr>,

    >
    > Put a table where?

    in the middle column of course.
    >
    > --
    > dorayme
    Deephay, Sep 5, 2007
    #3
  4. Deephay

    Ben C Guest

    On 2007-09-05, Deephay <> wrote:
    > Greetings all,
    >
    > I am currently writting a 3-column full-width webpage, I have a layout
    > problem, here is demo of the page:

    [...]
    > I have three columns (<div>), the width of the middle column (the last
    ><div>) will equal to 100% of the body width (according to CSS spec.),
    > but the content in that <div> will be put into the spaces between the
    > left and right floats according to the CSS spec, my problem is: some
    > times my CMS system will put a <table width="100%"><tr><td
    > align="center">content</td></tr>, this will break the layout of the
    > page because the middle column is not (100% - 2 x %25) but 100% and
    > the table width will be 100% either.
    >
    > Specify the width of the middle column direcly in the stylesheet (45%,
    > say) will help, but I am not sure whether it is a good idea.


    That sounds like not a bad idea. The problem is you've got padding and
    borders so things won't add up properly.

    But the general idea of giving the middle column something like width:
    45%; margin-left: 25%; margin-right: 25% should do the trick from the
    point of view of that stupid table.

    Why not fix the CMS system?
    Ben C, Sep 5, 2007
    #4
  5. Deephay

    Deephay Guest

    On Sep 5, 5:23 pm, Ben C <> wrote:
    > On 2007-09-05, Deephay <> wrote:
    >
    >
    >
    > > Greetings all,

    >
    > > I am currently writting a 3-column full-width webpage, I have a layout
    > > problem, here is demo of the page:

    > [...]
    > > I have three columns (<div>), the width of the middle column (the last
    > ><div>) will equal to 100% of the body width (according to CSS spec.),
    > > but the content in that <div> will be put into the spaces between the
    > > left and right floats according to the CSS spec, my problem is: some
    > > times my CMS system will put a <table width="100%"><tr><td
    > > align="center">content</td></tr>, this will break the layout of the
    > > page because the middle column is not (100% - 2 x %25) but 100% and
    > > the table width will be 100% either.

    >
    > > Specify the width of the middle column direcly in the stylesheet (45%,
    > > say) will help, but I am not sure whether it is a good idea.

    >
    > That sounds like not a bad idea. The problem is you've got padding and
    > borders so things won't add up properly.


    Thanks, I'll do it if I have no choice.
    I feel CSS behaves oddly in Firefox, according to CSS spec:

    "The border box of a table, a block-level replaced element, or an
    element in the normal flow that establishes a new block formatting
    context (such as an element with 'overflow' other than 'visible') must
    not overlap any floats in the same block formatting context as the
    element itself."

    But why does the middle column actually overlapped with them?

    >
    > But the general idea of giving the middle column something like width:
    > 45%; margin-left: 25%; margin-right: 25% should do the trick from the
    > point of view of that stupid table.
    >
    > Why not fix the CMS system?
    Deephay, Sep 5, 2007
    #5
  6. Deephay

    Deephay Guest

    On Sep 6, 12:52 am, Deephay <> wrote:
    > On Sep 5, 5:23 pm, Ben C <> wrote:
    >
    >
    >
    > > On 2007-09-05, Deephay <> wrote:

    >
    > > > Greetings all,

    >
    > > > I am currently writting a 3-column full-width webpage, I have a layout
    > > > problem, here is demo of the page:

    > > [...]
    > > > I have three columns (<div>), the width of the middle column (the last
    > > ><div>) will equal to 100% of the body width (according to CSS spec.),
    > > > but the content in that <div> will be put into the spaces between the
    > > > left and right floats according to the CSS spec, my problem is: some
    > > > times my CMS system will put a <table width="100%"><tr><td
    > > > align="center">content</td></tr>, this will break the layout of the
    > > > page because the middle column is not (100% - 2 x %25) but 100% and
    > > > the table width will be 100% either.

    >
    > > > Specify the width of the middle column direcly in the stylesheet (45%,
    > > > say) will help, but I am not sure whether it is a good idea.

    >
    > > That sounds like not a bad idea. The problem is you've got padding and
    > > borders so things won't add up properly.

    >
    > Thanks, I'll do it if I have no choice.
    > I feel CSS behaves oddly in Firefox, according to CSS spec:
    >
    > "The border box of a table, a block-level replaced element, or an
    > element in the normal flow that establishes a new block formatting
    > context (such as an element with 'overflow' other than 'visible') must
    > not overlap any floats in the same block formatting context as the
    > element itself."
    >
    > But why does the middle column actually overlapped with them?
    >

    I have a mis-understanding, this behavior is correct.
    >
    >
    > > But the general idea of giving the middle column something like width:
    > > 45%; margin-left: 25%; margin-right: 25% should do the trick from the
    > > point of view of that stupid table.

    >
    > > Why not fix the CMS system?
    Deephay, Sep 5, 2007
    #6
  7. Deephay

    Ben C Guest

    On 2007-09-05, Deephay <> wrote:
    > On Sep 5, 5:23 pm, Ben C <> wrote:

    [...]
    > I feel CSS behaves oddly in Firefox, according to CSS spec:
    >
    > "The border box of a table, a block-level replaced element, or an
    > element in the normal flow that establishes a new block formatting
    > context (such as an element with 'overflow' other than 'visible') must
    > not overlap any floats in the same block formatting context as the
    > element itself."
    >
    > But why does the middle column actually overlapped with them?


    Because it doesn't establish a new block formatting context, it's just a
    normal block-level element.

    Only some block boxes start "block formatting contexts"-- floats, table
    cells, positioned things, things with overflow other than visible.

    You could actually use this to solve your problem, and I almost
    suggested it the first time.

    Note that this particular thing has only very recently been tightened up
    in the CSS 2.1 spec. It used to say something like "browsers may make
    block formatting context narrower when there are floats in the way".

    Now it says "must" and is altogether clearer about the whole thing.

    Try this, then try commenting out overflow: hidden and reloading:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head>
    <title>Test Page</title>
    <style type="text/css">
    div
    {
    border: 2px solid black;
    }
    .left
    {
    float: left;
    background-color: pink;
    width: 25%;
    height: 300px;
    }
    .right
    {
    float: right;
    background-color: palegreen;
    width: 25%;
    height: 300px;
    }
    .middle
    {
    overflow: hidden;
    background-color: blue;
    height: 400px;
    }

    </style>
    </head>
    <body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
    </body>
    </html>
    Ben C, Sep 5, 2007
    #7
  8. Deephay

    Deephay Guest

    On Sep 6, 3:43 am, Ben C <> wrote:
    > On 2007-09-05, Deephay <> wrote:
    >
    > > On Sep 5, 5:23 pm, Ben C <> wrote:

    > [...]
    > > I feel CSS behaves oddly in Firefox, according to CSS spec:

    >
    > > "The border box of a table, a block-level replaced element, or an
    > > element in the normal flow that establishes a new block formatting
    > > context (such as an element with 'overflow' other than 'visible') must
    > > not overlap any floats in the same block formatting context as the
    > > element itself."

    >
    > > But why does the middle column actually overlapped with them?

    >
    > Because it doesn't establish a new block formatting context, it's just a
    > normal block-level element.
    >
    > Only some block boxes start "block formatting contexts"-- floats, table
    > cells, positioned things, things with overflow other than visible.
    >
    > You could actually use this to solve your problem, and I almost
    > suggested it the first time.
    >
    > Note that this particular thing has only very recently been tightened up
    > in the CSS 2.1 spec. It used to say something like "browsers may make
    > block formatting context narrower when there are floats in the way".
    >
    > Now it says "must" and is altogether clearer about the whole thing.
    >
    > Try this, then try commenting out overflow: hidden and reloading:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/REC-html40/strict.dtd">
    > <html>
    > <head>
    > <title>Test Page</title>
    > <style type="text/css">
    > div
    > {
    > border: 2px solid black;
    > }
    > .left
    > {
    > float: left;
    > background-color: pink;
    > width: 25%;
    > height: 300px;
    > }
    > .right
    > {
    > float: right;
    > background-color: palegreen;
    > width: 25%;
    > height: 300px;
    > }
    > .middle
    > {
    > overflow: hidden;
    > background-color: blue;
    > height: 400px;
    > }
    >
    > </style>
    > </head>
    > <body>
    > <div class="left"></div>
    > <div class="right"></div>
    > <div class="middle"></div>
    > </body>
    > </html>


    Hi Ben,

    Thanks, I thought the initial value of overflow is not visible, but it
    is. It is now matches my need (at least in Firefox).

    Another thing:
    I think Firefox does not handle CSS correctly, if you add a "width:
    100%;" for the middle column, the
    middle column will overlap with the right float, which is not correct
    for that case since "overflow: hidden"
    makes the middle column established a new block formatting context.

    Cheers.
    Deephay, Sep 6, 2007
    #8
  9. Deephay

    Ben C Guest

    On 2007-09-06, Deephay <> wrote:
    > On Sep 6, 3:43 am, Ben C <> wrote:

    [...]
    >> .left
    >> {
    >> float: left;
    >> background-color: pink;
    >> width: 25%;
    >> height: 300px;
    >> }
    >> .right
    >> {
    >> float: right;
    >> background-color: palegreen;
    >> width: 25%;
    >> height: 300px;
    >> }
    >> .middle
    >> {
    >> overflow: hidden;
    >> background-color: blue;
    >> height: 400px;
    >> }

    [...]
    > Another thing:
    > I think Firefox does not handle CSS correctly, if you add a "width:
    > 100%;" for the middle column, the middle column will overlap with the
    > right float, which is not correct for that case since "overflow:
    > hidden" makes the middle column established a new block formatting
    > context.


    You're right, it does do that, according to the spec, it is wrong. It
    should move the middle one down to clear the other two in that
    situation. But both Opera and Konqueror do the same thing as Firefox.

    9.5:
    [...]
    If necessary, implementations should clear the said element by placing
    it below any preceding floats, but may place it adjacent to such floats
    if there is sufficient space.

    But no-one actually does that.
    Ben C, Sep 6, 2007
    #9
    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. Andy
    Replies:
    7
    Views:
    6,241
    Roedy Green
    May 10, 2004
  2. Jim West
    Replies:
    4
    Views:
    1,405
    Jeff Schwab
    Jan 16, 2004
  3. Jukka Lehtonen

    operator== (float, float)

    Jukka Lehtonen, Aug 4, 2004, in forum: C++
    Replies:
    5
    Views:
    2,408
    Jukka Lehtonen
    Aug 5, 2004
  4. bd
    Replies:
    0
    Views:
    606
  5. Carsten Fuchs
    Replies:
    45
    Views:
    1,508
    James Kanze
    Oct 8, 2009
Loading...

Share This Page