SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    resolving percentage roundoff errors in ie

    This is the sequal of a problem I had earlier, I'm trying to build a framework for dynamic Drupal themes in which you can have multiple columns in a fluid width layout and the columns take up a percentage of the container width.

    In the wireframe design, the columns have a side-margin of 0.5% (of the main container) and a width of for example 1/3rd. I've done some research and a width specification with 3 decimals seems to hold up best, so the width of a column is 32.333% (33.333 including side margins).

    In order to prevent columns from collapsing while ie makes small roundoff errors Paul O B suggested the following style rules for the direct parent element of the columns:
    Code:
      margin-right:-100px;
      padding-right:100px;
    This trick worked perfectly for a while.. until I tested out my layout when the columns are not all floated to the same direction. This functionality is an important feature of my dynamic layouts.

    Soooo that was my best effort to explain the situation, Im sure this exmaple code is much more helpful:

    HTML 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" lang="en" xml:lang="en">
    <head>
      <title>testing</title>
    
      <style type="text/css">  
    
      div.container {
      width:80%;
      background:lightblue;
      }
      
      div.wrap1,div.wrap2,div.wrap3 {
      width:100%;
      float:left;
      background:yellow;
      margin:20px 0;    
      }
      
      div.wrap1 {
      margin-right:-100px;
      padding-right:100px;
      }
      
      div.wrap2 {
      margin-left:-100px;
      padding-left:100px;  
      }
      
      div.wrap3 { /* This one remains unsolved, when adjusting the width of the ie6/7 browser windown one of the columns will drop down. The thing that makes it break, I think, is that containers are float both left and right, but te faux padding cant fix it both ways or something. */
      margin-right:-100px;
      padding-right:100px;
      margin-left:-100px;
      padding-left:100px;  
      }
    
               
      .column {
      margin:0 0.5%;
      width:32.333%;
      float:left;
      background:red;
      position:relative;
      }
      
      
      /*** WRAP1 FLOATING ORDER ***/ 
      .wrap1 .c1 {
      float:left;
      }  
      .wrap1 .c2 {
      float:left;
      }  
      .wrap1 .c3 {
      float:left;
      }
      
      /*** WRAP2 FLOATING ORDER ***/ 
      .wrap2 .c1 {
      float:right;
      }  
      .wrap2 .c2 {
      float:right;
      }  
      .wrap2 .c3 {
      float:right;
      }
    
        /*** WRAP3 FLOATING ORDER ***/ 
      .wrap3 .c1 {
      float:right;
      }  
      .wrap3 .c2 {
      float:left;
      }  
      .wrap3 .c3 {
      float:right;
      }
      
      </style>
    
        
      
    </head>
    
    <body>
    
    <div class="container">
    
      <div class="wrap1">
      <div class="column c1"><p>bzz</p></div>
      <div class="column c2"><p>bzz</p></div>
      <div class="column c3"><p>bzz</p></div>
      </div>
      
      <div class="wrap2">
      <div class="column c1"><p>bzz</p></div>
      <div class="column c2"><p>bzz</p></div>
      <div class="column c3"><p>bzz</p></div>  
      </div>
      
      <div class="wrap3">
      <div class="column c1"><p>bzz</p></div>
      <div class="column c2"><p>bzz</p></div>
      <div class="column c3"><p>bzz</p></div>  
      </div>  
    </div>
    
    </body>
    Try and open this page in internet explorer 6 or 7 and see how the last row of blocks will collapse if you drag the side of the browser (thus adjusting the viewport width).

    Ive spent hours with this trying to solve it but no luck, hopefully someone here has a bright idea!

    Thnx in advance.
    [/html]

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

    I couldn't see any automatic way to do this. It seems you would have to apply negative margins to one side of a float to stop the float from dropping depending on where it was floated.

    I guess the easiest solution is to reduce the widths a little bit more so there is room to expand.

    I do have a method using overflow but it won't work with the changed order of the floats though.

    I'd need to play around with this for hours but I'm a bit busy at the moment so good luck


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
  •