Re: float moan

Discussion in 'HTML' started by Gus Richter, Apr 20, 2012.

  1. Gus Richter

    Gus Richter Guest

    On 4/20/2012 11:20 AM, Tim Streater wrote:
    > I wanted to have a fixed size scrollable area within a table cell, and
    > googling threw this up:
    >
    >
    > .scrollarea
    > {
    > width: 300px; height: 276px;
    > padding-left: 5px;
    > padding-right: 5px; border-color: #6699CC;
    > border-width: 1px; border-style: solid;
    > float: left; overflow: auto;
    > }
    >
    > I use it like this:
    >
    > <tr id='glist'>
    >
    > <td style="vertical-align: top; padding-right: 15px;">Group List:</td>
    >
    > <td style="vertical-align: top; background-color: #F0F0FF; padding:
    > 3px;"><span class='scrollarea' id='group_list'></span></td>
    >
    > </tr>
    >
    >
    > It's unlikely I could have come up with the scrollarea class by myself,
    > but it seems to do the job I wanted it to: a fixed area within a table
    > cell that I can write stuff into and which will have a vertical scroll
    > bar when necessary.
    >
    > However I am at a loss to understand what the float:left does other than
    > make it work. I tried removing it and the <span> content overflowed the
    > table cell, and every line of the content appeared to be underlined or
    > possibly have a border. Why does the float have this effect?



    Because of the SPAN the scrollarea is inline, the border is around the
    inline text and inline does not take dimension properties, therefore the
    width and height are ignored and the scrollarea extends to the end of
    the viewport.
    Adding the float property turns the scrollarea into a block which then
    takes the dimension properties and places the border around it.

    I would do it with a DIV instead of SPAN and the float would not be
    needed at all.

    --
    Gus
     
    Gus Richter, Apr 20, 2012
    #1
    1. Advertising

  2. Gus Richter

    Tim Streater Guest

    In article <jms406$219$>,
    Gus Richter <> wrote:

    > On 4/20/2012 11:20 AM, Tim Streater wrote:


    > > However I am at a loss to understand what the float:left does other than
    > > make it work. I tried removing it and the <span> content overflowed the
    > > table cell, and every line of the content appeared to be underlined or
    > > possibly have a border. Why does the float have this effect?

    >
    > Because of the SPAN the scrollarea is inline, the border is around the
    > inline text and inline does not take dimension properties, therefore the
    > width and height are ignored and the scrollarea extends to the end of
    > the viewport.
    > Adding the float property turns the scrollarea into a block which then
    > takes the dimension properties and places the border around it.
    >
    > I would do it with a DIV instead of SPAN and the float would not be
    > needed at all.


    OK. I did think about <div> but assumed I couldn't put one inside a
    table cell. Thanks again.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Apr 20, 2012
    #2
    1. Advertising

  3. Tim Streater wrote:
    > In article <jms406$219$>,
    > Gus Richter <> wrote:
    >
    >> On 4/20/2012 11:20 AM, Tim Streater wrote:

    >
    >> > However I am at a loss to understand what the float:left does other

    >> than
    >> > make it work. I tried removing it and the <span> content overflowed the
    >> > table cell, and every line of the content appeared to be underlined or
    >> > possibly have a border. Why does the float have this effect?

    >>
    >> Because of the SPAN the scrollarea is inline, the border is around the
    >> inline text and inline does not take dimension properties, therefore
    >> the width and height are ignored and the scrollarea extends to the end
    >> of the viewport.
    >> Adding the float property turns the scrollarea into a block which then
    >> takes the dimension properties and places the border around it.
    >>
    >> I would do it with a DIV instead of SPAN and the float would not be
    >> needed at all.

    >
    > OK. I did think about <div> but assumed I couldn't put one inside a
    > table cell. Thanks again.
    >


    Well if you are in doubt you can always look it up:

    "<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data
    cell-->"

    <http://www.w3.org/TR/html401/struct/tables.html#edef-TD>

    A TD element can contain "flow" elements and if you click flow

    "<!ENTITY % flow "%block; | %inline;">"

    <http://www.w3.org/TR/html401/sgml/dtd.html#flow>

    So in can house both inline AND block elements. So yes, a TD can have a
    DIV inside...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 20, 2012
    #3
  4. Gus Richter

    Tim Streater Guest

    In article <jmsfe7$b5k$>,
    "Jonathan N. Little" <> wrote:

    > Tim Streater wrote:
    > > In article <jms406$219$>,
    > > Gus Richter <> wrote:
    > >
    > >> On 4/20/2012 11:20 AM, Tim Streater wrote:

    > >
    > >> > However I am at a loss to understand what the float:left does other
    > >> than
    > >> > make it work. I tried removing it and the <span> content overflowed the
    > >> > table cell, and every line of the content appeared to be underlined or
    > >> > possibly have a border. Why does the float have this effect?
    > >>
    > >> Because of the SPAN the scrollarea is inline, the border is around the
    > >> inline text and inline does not take dimension properties, therefore
    > >> the width and height are ignored and the scrollarea extends to the end
    > >> of the viewport.
    > >> Adding the float property turns the scrollarea into a block which then
    > >> takes the dimension properties and places the border around it.
    > >>
    > >> I would do it with a DIV instead of SPAN and the float would not be
    > >> needed at all.

    > >
    > > OK. I did think about <div> but assumed I couldn't put one inside a
    > > table cell. Thanks again.
    > >

    >
    > Well if you are in doubt you can always look it up:


    Trouble was I wasn't in doubt :-( in that particular instance although I
    am most of the time so I do, in fact, look a lot of stuff up.

    > "<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data
    > cell-->"
    >
    > <http://www.w3.org/TR/html401/struct/tables.html#edef-TD>
    >
    > A TD element can contain "flow" elements and if you click flow
    >
    > "<!ENTITY % flow "%block; | %inline;">"
    >
    > <http://www.w3.org/TR/html401/sgml/dtd.html#flow>
    >
    > So in can house both inline AND block elements. So yes, a TD can have a
    > DIV inside...


    Yes - thanks - and now I have. That has to be the easiest change I've
    ever made to simplify things with no untoward effects. Change the span
    to a div and remove the float. Result - no change.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Apr 20, 2012
    #4
  5. Gus Richter

    dorayme Guest

    In article <jmsfe7$b5k$>,
    "Jonathan N. Little" <> wrote:

    > a TD can have a
    > DIV inside...


    Indeed. A TD is like a dog that will eat anything at all, even
    something that looks for all the world like it's grandma.

    <table><tr><td><table>...</table></td> ...

    --
    dorayme
     
    dorayme, Apr 21, 2012
    #5
  6. Gus Richter

    dorayme Guest

    In article <>,
    Tim Streater <> wrote:

    > Yes - thanks - and now I have. That has to be the easiest change I've
    > ever made to simplify things with no untoward effects. Change the span
    > to a div and remove the float. Result - no change.


    I agree with your decision to use a DIV but mainly, in this case,
    because it then requires no styling by you with respect to the display
    property. Generally easier work practice to not do something than to
    do something.

    A DIV has a default style of 'display: block'. You are relying on the
    default provided by others (the browser maker). It is not part of its
    nature in these modern times. A SPAN, on the other hand has a default
    of 'display: inline', also not part of its nature really.

    DIVs and SPANs, in fact, have an almost deliberate lack of nature.
    They are the taxis, they will take anyone anywhere, they have no wills
    of their own, no desires, they are really quite contemptible. I use
    them all the time and laugh!

    They are not even as natureful as most shop window dummies, these have
    a sex at least. You can verify this you know. By lurking about these
    windows after seasonal fashions end to catch the moment before the
    next.

    --
    dorayme
     
    dorayme, Apr 21, 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. Andy
    Replies:
    7
    Views:
    6,269
    Roedy Green
    May 10, 2004
  2. bd
    Replies:
    0
    Views:
    635
  3. Carsten Fuchs
    Replies:
    45
    Views:
    1,560
    James Kanze
    Oct 8, 2009
  4. Tim Streater

    button/image moan

    Tim Streater, Apr 20, 2012, in forum: HTML
    Replies:
    8
    Views:
    797
    Jonathan N. Little
    Apr 21, 2012
  5. dorayme

    Re: float moan

    dorayme, Apr 20, 2012, in forum: HTML
    Replies:
    9
    Views:
    1,669
    dorayme
    Apr 22, 2012
Loading...

Share This Page