div and table problem

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • haripadadas
    New Member
    • May 2010
    • 2

    div and table problem

    I have a style sheet containing the following definitions:

    Code:
    #leftcontent {
    position: absolute;
    left:20px;
    top:60px;
    width:180px;
    border:1px solid #000;
    padding-top: 15px;
    }
    
    #centrecontent {
    margin-left: 200px;
    margin-right: 200px;
    border:1px solid #000;
    padding-top: 15px;
    }
    
    #rightcontent {
    position: absolute;
    right:20px;
    top:60px;
    width:180px;
    border:1px solid #000;
    }
    and inside <div id="centreconte nt"> I have <table width=100%>, which I hoped
    would produce a table the width of just the centre section. However, in
    Internet Explorer the table is the full width of the page, which then goes
    off the side of the window since it is already indented about 200 px. In
    any other browser I have tried the table width is correct. Can someone
    please tell me what is wrong? Thanks.
    Last edited by Dormilich; May 17 '10, 10:14 AM. Reason: Please use [code] tags when posting code
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    Setting something to 100% means 100% of the containing parent element. If the body is the containing element, and it is the full width of the page, then so is the table.

    Comment

    • thesmithman
      New Member
      • Aug 2008
      • 37

      #3
      Originally posted by haripadadas
      I have a style sheet containing the following definitions:

      Code:
      #leftcontent {
      position: absolute;
      left:20px;
      top:60px;
      width:180px;
      border:1px solid #000;
      padding-top: 15px;
      }
      
      #centrecontent {
      margin-left: 200px;
      margin-right: 200px;
      border:1px solid #000;
      padding-top: 15px;
      }
      
      #rightcontent {
      position: absolute;
      right:20px;
      top:60px;
      width:180px;
      border:1px solid #000;
      }
      and inside <div id="centreconte nt"> I have <table width=100%>, which I hoped
      would produce a table the width of just the centre section. However, in
      Internet Explorer the table is the full width of the page, which then goes
      off the side of the window since it is already indented about 200 px. In
      any other browser I have tried the table width is correct. Can someone
      please tell me what is wrong? Thanks.
      a suggestion: you could edit your CSS to something like:

      Code:
      #centrecontent table{
      margin-right:200px;
      margin-left:200px;
      width:100%;
      }
      and that would allow you to remove the width declaration from your HTML.

      Sometimes IE has a buggy display; but other times IE is just very literal in its interpretation of instructions. Some of the other browsers are more gentle in their renderings.

      Best of luck!

      Comment

      Working...