SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    absolutely positioned div by left and right without width - IE problem

    Hi, I need to create an absolutely positioned DIV whose horizontal position (and width) is defined by its distance from left and right:

    Code:
    #div {
      position: absolute;
      left: 10px;
      right: 50px;
      top: 0;
      height: 100px;
    }
    The problem is that IE does not stretch the div since there's no width defined. Does anybody know a way around? I've spent quite some time with this issue now and I haven't found any solution except of using tables. What misery!

    Thanks for any suggestions / ideas.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    yes you can get around it with a fix I discovered some years ago

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #test {
      position: absolute;
      left: 10px;
      right: 50px;
      top: 0;
      height: 100px;
     background:red;
    }
    /* mac hide \*/
    .inner{height:1%}
    /* end hide */
    </style>
    </head>
    <body>
    <div id="test">
     <div class="inner">
      <p>Test</p>
     </div>
    </div>
    </body>
    </html>
    I don't believe this is documented anywhere else.

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you very very much, Paul !


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •