Simple CSS box problem

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • j055
    #1

    Simple CSS box problem

    Hi

    The following HTML shows a table with some wide content which overlaps
    an outer div when the browser width is narrowed? How do I allow the
    table content to push the div to the width of the table?

    I want the div to normally be centered and 90% of the page width. The
    table content is dynamic so I never know how wide it's going to be. I
    just want to handle things more gracefully than overlaping it.

    Many thanks
    Andrew

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Box problem</title>
    <style type="text/css">
    .box
    {
    margin: 0 auto;
    width: 90%;
    border: solid 2px red;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <table cellspacing="0" >
    <tr>
    <td>

    verywidestuffve rywidestuffvery widestuffverywi destuffverywide stuffverywidest uffverywidestuf fverywidestuffv erywidestuffver ywidestuff
    </td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    Tags: None
    • Jonathan N. Little
      #2
      Re: Simple CSS box problem

      j055 wrote:
      Hi
      >
      The following HTML shows a table with some wide content which overlaps
      an outer div when the browser width is narrowed? How do I allow the
      table content to push the div to the width of the table?
      >
      I want the div to normally be centered and 90% of the page width. The
      table content is dynamic so I never know how wide it's going to be. I
      just want to handle things more gracefully than overlaping it.
      >
      Many thanks
      Andrew
      >
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Box problem</title>
      <style type="text/css">
      .box
      {
      margin: 0 auto;
      width: 90%;
      border: solid 2px red;
      }
      </style>
      </head>
      <body>
      <div class="box">
      <table cellspacing="0" >
      <tr>
      <td>
      >
      verywidestuffve rywidestuffvery widestuffverywi destuffverywide stuffverywidest uffverywidestuf fverywidestuffv erywidestuffver ywidestuff
      </td>
      </tr>
      </table>
      </div>
      </body>
      </html>
      It's the old "10 lbs of **** in a 5-lb bag" problem. You either have to
      *not* constrain the width of the container OR accept results of overflow.

      "overflow: visible" is what you are now witnessing, "overflow: hidden"
      will crop off the content at the border, or "overflow: auto" will create
      a scroll bar when the content does not fit.

      My advice, none of the above, but rather rethink your design. Of course
      a real-world example (via a URL please!) would be more enlightening then
      that unrealistic code snippet

      --
      Take care,

      Jonathan
      -------------------
      LITTLE WORKS STUDIO
      Little Works Studio Site Maintainance
      http://www.LittleWorksStudio.com

        Comment

        • Ben C
          #3
          Re: Simple CSS box problem

          On 2008-06-06, j055 <andrew.jocelyn @orbnet.co.ukwr ote:
          Hi
          >
          The following HTML shows a table with some wide content which overlaps
          an outer div when the browser width is narrowed? How do I allow the
          table content to push the div to the width of the table?
          >
          I want the div to normally be centered and 90% of the page width. The
          table content is dynamic so I never know how wide it's going to be. I
          just want to handle things more gracefully than overlaping it.
          Add display: table to the styles for .box.

          Not expected to work in IE, where you will just have to use a <table>.
          Or just put the red border on the table you already have and forget the
          div, although in the real page, the div perhaps has some purpose.

          There are other ways, but not if you want .box centered and with a
          minimum width of 90%. If you didn't mind it on the left, you could use
          float: left and min-width: 90% instead of display: table.
          Many thanks
          Andrew
          >
          ><html xmlns="http://www.w3.org/1999/xhtml">
          ><head>
          <title>Box problem</title>
          <style type="text/css">
          .box
          {
          margin: 0 auto;
          width: 90%;
          border: solid 2px red;
          }
          </style>
          ></head>
          ><body>
          <div class="box">
          <table cellspacing="0" >
          <tr>
          <td>
          >
          verywidestuffve rywidestuffvery widestuffverywi destuffverywide stuffverywidest uffverywidestuf fverywidestuffv erywidestuffver ywidestuff
          </td>
          </tr>
          </table>
          </div>
          ></body>
          ></html>

            Comment

            Previous template Next
            Working...