Proper stretching of a table

Discussion in 'HTML' started by Sam Takoy, Aug 27, 2010.

  1. Sam Takoy

    Sam Takoy Guest

    Hi,

    In the following code, I want the table to appear side by side with the
    red div, and to stretch to fill the available space within the green
    div. But, in all browsers, the table goes underneath the red div? What's
    the proper fix, other than to specify the width on the table, which I
    don't want to do? Thanks! Sam

    <div style="width: 300px; background: green;">

    <div style="height: 100px; width: 100px; background: red; float:
    left;"></div>

    <table style="width: 100%; background: yellow; float:
    left;"><tr><td>Hi</td></tr></table>

    <div style="clear: both;"></div>

    </div>
     
    Sam Takoy, Aug 27, 2010
    #1
    1. Advertising

  2. Sam Takoy wrote:

    > In the following code,


    As people frequently advice in this group, you should post a URL, not
    snippet of code. In this particular case, it might not matter, but a) it's
    good to show good example and b) it's easier to check out the situation if
    you can just click on an address, instead of setting up a test page and
    wondering whether the poster used the magic incantation that makes browsers
    behave almost decently ("standards mode" vs. "quirks mode"), etc.

    > I want the table to appear side by side with
    > the red div, and to stretch to fill the available space within the
    > green div. But, in all browsers, the table goes underneath the red
    > div?


    Both div and table elements are block elements, so the default rendering is
    that they are displayed as rectangles, one above another in vertical
    direction. When you use the CSS setting float: left, this may get partly
    changed. But a block element then appears on the right of another only if it
    fits there.

    > <div style="width: 300px; background: green;">
    >
    > <div style="height: 100px; width: 100px; background: red; float:
    > left;"></div>
    >
    > <table style="width: 100%; background: yellow; float:
    > left;"><tr><td>Hi</td></tr></table>
    >
    > <div style="clear: both;"></div>
    >
    > </div>


    The key here is the width of the table. By default it will be the minimum
    width required by its content, according to fairly complex and somewhat odd
    algorithms that browsers apply. But here you have explicitly set it to 100%.
    It means 100% of available width, so much do you expect to fit on the left
    side of it?

    > What's the proper fix, other than to specify the width on the table, which
    > I
    > don't want to do?


    But you _are_ specifying the width of the table! It is difficult to see what
    you trying to achieve and what the real problem is (and you surely have a
    problem if you set dimensions in pixels), but the question asked seems to
    get solved simply by removing the declaration width: 100%.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Aug 27, 2010
    #2
    1. Advertising

  3. Sam Takoy

    Neredbojias Guest

    On 26 Aug 2010, Sam Takoy <> wrote:

    > Hi,
    >
    > In the following code, I want the table to appear side by side with
    > the red div, and to stretch to fill the available space within the
    > green div. But, in all browsers, the table goes underneath the red
    > div? What's the proper fix, other than to specify the width on the
    > table, which I don't want to do? Thanks! Sam
    >
    > <div style="width: 300px; background: green;">
    >
    > <div style="height: 100px; width: 100px; background: red; float:
    > left;"></div>
    >
    > <table style="width: 100%; background: yellow; float:
    > left;"><tr><td>Hi</td></tr></table>
    >
    > <div style="clear: both;"></div>
    >
    > </div>


    Since you styled the green div 300px and the red div 100px, doesn't the
    table need to be 200px (and borderless) to fulfill your criteria?

    --
    Neredbojias

    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, Aug 27, 2010
    #3
  4. Sam Takoy

    Sam Takoy Guest

    On 8/27/2010 3:10 AM, Ben C wrote:
    > On 2010-08-27, Jukka K. Korpela<> wrote:
    > [...]
    >>> <div style="width: 300px; background: green;">
    >>>
    >>> <div style="height: 100px; width: 100px; background: red; float:
    >>> left;"></div>
    >>>
    >>> <table style="width: 100%; background: yellow; float:
    >>> left;"><tr><td>Hi</td></tr></table>
    >>>
    >>> <div style="clear: both;"></div>
    >>>
    >>> </div>

    >>
    >> The key here is the width of the table. By default it will be the minimum
    >> width required by its content, according to fairly complex and somewhat odd
    >> algorithms that browsers apply.

    >
    > It will be the _maximum_ width required by its content, unless there
    > isn't enough width available. In that case it will take all the
    > available width but will never go narrower than the minimum width
    > required by the content.
    >
    >> But here you have explicitly set it to 100%. It means 100% of
    >> available width, so much do you expect to fit on the left side of it?

    >
    > This sounds like the cause of the OP's problem, yes.
    >
    >>> What's the proper fix, other than to specify the width on the table,
    >>> which I don't want to do?

    >>
    >> But you _are_ specifying the width of the table! It is difficult to see what
    >> you trying to achieve and what the real problem is (and you surely have a
    >> problem if you set dimensions in pixels), but the question asked seems to
    >> get solved simply by removing the declaration width: 100%.

    >
    > He probably wants it to fill the _rest_ of the containing space which
    > can be done like this:
    >
    > table { background: yellow }
    > #left
    > {
    > float: left;
    > width: 100px;
    > height: 100px;
    > background: red;
    > }
    > #right { margin-left: 100px; }
    > #fill { width: 100% }
    >
    > ...
    >
    > <div id="left">
    > </div>
    > <div id="right">
    > <table id="fill">
    > <tr><td>table</td></tr>
    > </table>
    > </div>
    >
    > The extra div "right", being a block and not a table, fills all the
    > width available (containing minus its own left margin in this case)
    > automatically. We then make the table 100% of that.


    Nice solution. Thank you!
     
    Sam Takoy, Aug 27, 2010
    #4
  5. Sam Takoy

    Sam Takoy Guest

    On 8/27/2010 3:10 AM, Ben C wrote:
    > On 2010-08-27, Jukka K. Korpela<> wrote:
    > [...]
    >>> <div style="width: 300px; background: green;">
    >>>
    >>> <div style="height: 100px; width: 100px; background: red; float:
    >>> left;"></div>
    >>>
    >>> <table style="width: 100%; background: yellow; float:
    >>> left;"><tr><td>Hi</td></tr></table>
    >>>
    >>> <div style="clear: both;"></div>
    >>>
    >>> </div>

    >>
    >> The key here is the width of the table. By default it will be the minimum
    >> width required by its content, according to fairly complex and somewhat odd
    >> algorithms that browsers apply.

    >
    > It will be the _maximum_ width required by its content, unless there
    > isn't enough width available. In that case it will take all the
    > available width but will never go narrower than the minimum width
    > required by the content.
    >
    >> But here you have explicitly set it to 100%. It means 100% of
    >> available width, so much do you expect to fit on the left side of it?

    >
    > This sounds like the cause of the OP's problem, yes.
    >
    >>> What's the proper fix, other than to specify the width on the table,
    >>> which I don't want to do?

    >>
    >> But you _are_ specifying the width of the table! It is difficult to see what
    >> you trying to achieve and what the real problem is (and you surely have a
    >> problem if you set dimensions in pixels), but the question asked seems to
    >> get solved simply by removing the declaration width: 100%.

    >
    > He probably wants it to fill the _rest_ of the containing space which
    > can be done like this:
    >
    > table { background: yellow }
    > #left
    > {
    > float: left;
    > width: 100px;
    > height: 100px;
    > background: red;
    > }
    > #right { margin-left: 100px; }
    > #fill { width: 100% }
    >
    > ...
    >
    > <div id="left">
    > </div>
    > <div id="right">
    > <table id="fill">
    > <tr><td>table</td></tr>
    > </table>
    > </div>
    >
    > The extra div "right", being a block and not a table, fills all the
    > width available (containing minus its own left margin in this case)
    > automatically. We then make the table 100% of that.


    Actually, why doesn't this create a gap that equals 100px (left-margin)
    between #left and #right? I thought that the idea of margins is that
    they reserve a space that won't be occupied by any neighbors. Thanks.
     
    Sam Takoy, Aug 27, 2010
    #5
  6. Sam Takoy

    dorayme Guest

    In article <i57pmq$5lr$-september.org>,
    Sam Takoy <> wrote:

    > On 8/27/2010 3:10 AM, Ben C wrote:

    ....
    > > table { background: yellow }
    > > #left
    > > {
    > > float: left;
    > > width: 100px;
    > > height: 100px;
    > > background: red;
    > > }
    > > #right { margin-left: 100px; }
    > > #fill { width: 100% }
    > >
    > > ...
    > >
    > > <div id="left">
    > > </div>
    > > <div id="right">
    > > <table id="fill">
    > > <tr><td>table</td></tr>
    > > </table>
    > > </div>
    > >

    .....
    >
    > Actually, why doesn't this create a gap that equals 100px (left-margin)
    > between #left and #right? I thought that the idea of margins is that
    > they reserve a space that won't be occupied by any neighbors. Thanks.


    Because that's not really the idea. To get the side by side,
    floats are used to stop the block elements flowing as normal,
    (namely, going to a new line). Normal bets are off where floats
    are concerned because they are out of the normal flow (the way a
    browser would treat elements without CSS positioning of any kind)
    and things in the flow do not see them.

    The margin given to div of id="right" - leaving out conditions
    about borders etc - is the distance between it left edge and the
    right edge of the containing element, in this case, body. In
    Ben's HTML/CSS, the containing block for the div of id="left" is
    the body. The body usually has a little margin of it own by
    default, easily disposed of with body {margin: 0;}, if this is
    done the div of id="right" will be 100px to the right of the
    viewport's left edge. Lots of things can *float* in there and
    lots of things can be absolutely positioned in there.


    <body>
    <div style="margin-left: 400px;">stuff</div>
    </body>

    allows a lot of extras to be *appear* in this 400px space to the
    left of this div if they are floated or absolutely positioned or
    even relatively positioned. In a suitably wide viewport.

    --
    dorayme
     
    dorayme, Aug 27, 2010
    #6
  7. Sam Takoy

    dorayme Guest

    In article <>,
    dorayme <> wrote:

    > The margin given to div of id="right" - leaving out conditions
    > about borders etc - is the distance between it left edge and the
    > right edge of the containing element, in this case, body.


    Sorry,I cut out stuff about borders and should have amended this
    to read


    The margin given to div of id="right" - leaving out conditions
    about borders etc - is the distance between its left edge and the
    left edge of the containing element, in this case, body.

    --
    dorayme
     
    dorayme, Aug 27, 2010
    #7
    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. Replies:
    1
    Views:
    1,319
  2. =?Utf-8?B?U3JpZGhhcg==?=

    stretching the background image instead of tiling

    =?Utf-8?B?U3JpZGhhcg==?=, Nov 23, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    8,255
    Mats Lycken
    Nov 30, 2005
  3. Arthur Dent

    Table stretching excessively in IE

    Arthur Dent, Mar 6, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    1,030
    slagomite
    Mar 7, 2006
  4. Lee Harris

    Image Stretching

    Lee Harris, Oct 27, 2003, in forum: HTML
    Replies:
    1
    Views:
    529
    David Graham
    Oct 27, 2003
  5. Eliyahu Goldin

    Re: stretching <table heigth="100%"> don't work

    Eliyahu Goldin, Jan 3, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    391
    Eliyahu Goldin
    Jan 3, 2007
Loading...

Share This Page