problem with table in div (faux column template)

Discussion in 'HTML' started by monkeymynd, Mar 20, 2007.

  1. monkeymynd

    monkeymynd Guest

    hi all,

    i'm fairly new to css. i've been playing with a template, and am
    having a problem putting a table into a div. the div is the center
    column in, what i believe is called, a faux column template.
    basically, it seems that the table is 'breaking out' of the div and
    setting itself at the bottom of it. i can put text, etc. in the div
    without any problem. so far, the table is the only thing messing it
    up.

    i've tried several suggestions i've found online. tried wrapping it in
    another div with several different styles...tried setting the width of
    the table to 99% of the containing div, etc. i do not want to position
    it absolute, so i'm looking for a solution that avoids that.

    any help is greatly appreciated.

    css is here : http://www.monkeymynd.com/test/nautica01bug/css/nautica01.css

    example html is here : http://www.monkeymynd.com/test/nautica01bug/index.html

    thanks in advance for any replies.
     
    monkeymynd, Mar 20, 2007
    #1
    1. Advertising

  2. monkeymynd

    John Hosking Guest

    monkeymynd wrote:
    >
    > example html is here : http://www.monkeymynd.com/test/nautica01bug/index.html


    Consider whether/why you need table { clear:both; }. It makes the table
    try to elbow its neighbors out of the way, meaning it moves down so
    nothing is left nor right of it.

    --
    John
     
    John Hosking, Mar 20, 2007
    #2
    1. Advertising

  3. monkeymynd wrote:
    > hi all,
    >
    > i'm fairly new to css. i've been playing with a template, and am
    > having a problem putting a table into a div. the div is the center
    > column in, what i believe is called, a faux column template.
    > basically, it seems that the table is 'breaking out' of the div and
    > setting itself at the bottom of it. i can put text, etc. in the div
    > without any problem. so far, the table is the only thing messing it
    > up.
    >
    > i've tried several suggestions i've found online. tried wrapping it in
    > another div with several different styles...tried setting the width of
    > the table to 99% of the containing div, etc. i do not want to position
    > it absolute, so i'm looking for a solution that avoids that.
    >
    > any help is greatly appreciated.
    >
    > css is here : http://www.monkeymynd.com/test/nautica01bug/css/nautica01.css
    >
    > example html is here : http://www.monkeymynd.com/test/nautica01bug/index.html
    >
    > thanks in advance for any replies.
    >


    Remove the 'clear:both;' on your table element.


    BTW:

    Sizing block marking and padding in 'px' is very inflexible. Bump the
    text size up a bit and your 'pixel-perfect' layout falls apart.

    Why are your using images for simple sans-serif text?

    <span>Some text</span><br /> makes no sense, use a block element that
    make sense.

    <img .. /> <br /><img .. /> <br /><img .. /> <br /><img .. /> <br />

    Also also makes no sense, if you want your images to stack in a area
    style them as block

    ..stacked IMG { display: block; }

    <div class="stacked">
    <img .. /> <img .. /> <img .. /><img .. />
    <div>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 20, 2007
    #3
  4. monkeymynd

    monkeymynd Guest

    thanks...i appreciate the help. as for the suggestions, it's not my
    template, so i haven't had a chance to mess with it yet. just found it
    on oswd and it was rated pretty high, so i'd thought i'd give it a
    shot. figured it would give me a chance to learn a bit. still, i may
    alter it to include some of your tips, as they do make sense.
     
    monkeymynd, Mar 20, 2007
    #4
  5. monkeymynd

    Andy Dingley Guest

    On 20 Mar, 23:12, "Jonathan N. Little" <> wrote:

    > <span>Some text</span><br /> makes no sense, use a block element that
    > make sense.


    It makes no sense in _this_ case. A <h3>, <h4> or somesuch is an
    obviously better choice here.

    However

    <span>Some text</span><br />

    makes perfect sense in many of the more general cases, such as where
    it's within a larger block of text. Your posting is potentially
    misleading, if read out of context.
     
    Andy Dingley, Mar 21, 2007
    #5
  6. Andy Dingley wrote:
    > On 20 Mar, 23:12, "Jonathan N. Little" <> wrote:
    >
    >> <span>Some text</span><br /> makes no sense, use a block element that
    >> make sense.

    >
    > It makes no sense in _this_ case. A <h3>, <h4> or somesuch is an
    > obviously better choice here.
    >
    > However
    >
    > <span>Some text</span><br />
    >
    > makes perfect sense in many of the more general cases, such as where
    > it's within a larger block of text. Your posting is potentially
    > misleading, if read out of context.
    >


    If you use style you have more presentational flexibility:

    <span class="properName">The Name</span> more info...

    If you want the "properName" displayed on its own line

    SPAN.properName { display: block; }

    Or if you change your mind and just wish it to be a bit bigger and bold:

    SPAN.properName { font-size: 1.2em; font-weight: bold; }



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 21, 2007
    #6
  7. Scripsit Jonathan N. Little:

    > Andy Dingley wrote:

    - -
    >> <span>Some text</span><br />
    >>
    >> makes perfect sense in many of the more general cases, such as where
    >> it's within a larger block of text. Your posting is potentially
    >> misleading, if read out of context.

    >
    > If you use style you have more presentational flexibility:


    And less. I'm not sure I see what you are really discussing, and the Subject
    line seems to be rather far from it. But if correcting potentially
    misleading statements is the theme here, I'll offer my 0.02 euros:

    > <span class="properName">The Name</span> more info...
    >
    > If you want the "properName" displayed on its own line
    >
    > SPAN.properName { display: block; }


    Yes, but that corresponds to
    <br><span>...</span><br>
    and cannot be used if you want the content of the span appear inline, just
    followed by a line break. That is, there is no effective way of causing just
    one line break in CSS. (Using generated content doesn't count, since it's
    not supported by IE.)

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 21, 2007
    #7
  8. Jukka K. Korpela wrote:
    > Scripsit Jonathan N. Little:
    >
    >> Andy Dingley wrote:

    > - -
    >>> <span>Some text</span><br />
    >>>
    >>> makes perfect sense in many of the more general cases, such as where
    >>> it's within a larger block of text. Your posting is potentially
    >>> misleading, if read out of context.

    >>
    >> If you use style you have more presentational flexibility:

    >
    > And less. I'm not sure I see what you are really discussing, and the
    > Subject line seems to be rather far from it. But if correcting
    > potentially misleading statements is the theme here, I'll offer my 0.02
    > euros:


    The subject was a problem with a table, I just also noted other evidence
    within source which indicated deficiency in understanding potential of
    CSS and markup.

    When I see lists of <br>'s between elements usually means the person
    does does not understand how to set margins and padding on elements

    When I see: <br><inline-element><br><inline-element><br>... usually
    means the person does does not understand that they have a list, or that
    they could style inline elements as block and get the presentation
    effect that they desire or maybe they should be using a block element to
    start with.


    >
    >> <span class="properName">The Name</span> more info...
    >>
    >> If you want the "properName" displayed on its own line
    >>
    >> SPAN.properName { display: block; }

    >
    > Yes, but that corresponds to
    > <br><span>...</span><br>
    > and cannot be used if you want the content of the span appear inline,
    > just followed by a line break. That is, there is no effective way of
    > causing just one line break in CSS. (Using generated content doesn't
    > count, since it's not supported by IE.)
    >


    <br><span>...</span><br> was what I saw in the markup, but yes you are
    correct about a single line break in CSS, that is was the generated
    content would address. As to IE, as long as MS continues to to put their
    fingers in their ears chanting "our way or the highway..." we will
    always have to design for with fork! The frustrating bit is that even if
    designed "their" way, which version of "their" way since it changes with
    each version of IE...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 21, 2007
    #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. savvy
    Replies:
    1
    Views:
    487
    savvy
    Jan 18, 2006
  2. Replies:
    4
    Views:
    945
  3. Guest
    Replies:
    0
    Views:
    557
    Guest
    Jun 29, 2007
  4. K Viltersten

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

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    779
  5. Pirolla
    Replies:
    1
    Views:
    374
    123Jim
    Apr 18, 2011
Loading...

Share This Page