SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inline-block != columnar layout ? floats best?

    ok. so i'm trying to see if divs set as inline-block elements based layout can (sometimes) be a replacement for a floats layout.

    so far, this is what i have:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr"><head>
    
      <meta	http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta	http-equiv="Content-Language" content="en">
    
      <style type="text/css">
        
        /* 
         * one can put a css reset here
         * if indeed justifiable
         * but not just by habbit
        */    
     
        .page { background:#ddd; }
          
            .mainsection { display:inline-block; vertical-align:top; }
            
            /*
             * the following two ie fix/hacks could be 
             * place in a different css file, w/o the hacks,
             * and then make use of CC for IE 
             */
            *html .mainsection { display:inline; }
            *+html .mainsection { display:inline; }
                
            #header { background:#dfe; }
            #ms1, #ms3 { width:25&#37;; background:#fed; }
            #ms2 { width:50%; background:#def; }
            #ms1 div { width:100px; background:#dee; float:right; }
            #footer { background:#fde; }
        
      </style>
    
    </head><body id="inlinetest" class="page">
    
        <div id="header" class="pagesection">
          <span>header div</span>
        </div>
    
        
        <div id="main" class="pagesection">
        
          <div id="ms1" class="mainsection">
            div displayed <br>inline-block
            <div>
              a floated div in<br>
              a inline-block div here<br>
            </div>
          </div><div id="ms2" class="mainsection">
            main div inline-block
          </div><div id="ms3" class="mainsection">
            another inline-block div
          </div>
          
        </div>
    
        
        <div id="footer" class="pagesection">
          <span>footer</span>
        </div>
      
    </body></html>
    pretty straight forward: 3 divs inline-blocks, 2 having 25% width, one having 50% width. they make a total of 100% width. in theory, anyway. it works fine (says me, you can argue, of course) in ch6, ff3.6, ie8, op10.6, saf5. ie6-7, i'm not interested right now.

    the previous problem:
    making a block element an inline-block element was causing a right whitespace to appear. that was from the whitespace in the actual markup. so, no whitespace between the end tag and the start tag of between elements fixed it (...</div><div>..., no new line or spaces there).

    the current problem:
    the use of % for the width of inline-block elements makes calculations for box model dimensions to round up the pixel. thus, when resizing browser window, a gap on the far right edge on the inline-block line appears now and again, when those calculation are rounded inferior.

    the float declaration fixes just that: causes an element to stick to an edge. the approximation, when using floats for columns, would not make it self known on the edges, thus creating an illusion of perfection.

    i'm looking for css ways to make the last inline-block element: ms3 stick to the right edge, even if the gap would appear between the inline elements, just not on the edges. i've tried float:right, but the layout breaks given certain conditions, making the element "leave" the line. the last resort would be some kind of progressive enhancement using javascript, but i don't like the idea.

    any thoughts? aside from judging the id and class names and use

    those are an attempt to OO. thus:
    HTML Code:
    <body id="inlinetest" class="page">
    means this body element is an instance of the page class, an object called inlinetest.

    this OO will only apply to the main elements: pages on a site and main elements in them.

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    an image on how it is cross browsers now.



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
  •