Which is the best 3-column 100% width pure CSS layout framework? [closed]_问答_开发者

Which is the best 3-column 100% width pure CSS layout framework? [closed]

开发者 https://www.devze.com 2023-01-19 08:44 出处：网络

Closed. This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing

Closed. This question is opinion-based. It is not currently accepting answers.

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 8 years ago.

Improve this question

We're starting new project a开发者_如何学Cnd we need 100% width (100% height is a bonus :)), 3 column, pure CSS layout for business RIA.

We checked out YAML, YUI, Blueprint and couple of others but seems that none offers or guarantees 100% compatibility with all major browsers.

Which one is the best for this purpose from your experience?

Thanks in advance.

Undoubtedly you've seen this already, but in his A List Apart website, Matthew Levine not only provides the Holy Grail of 3-column layouts, but explains how it works, in every detail.

Something like this should work in most browsers IIRC. However, you will need some sort of javascript if you want a header/footer unless you use faux columns. For an RIA I think this is acceptable.

Personally, I never use CSS frameworks.

The example below should also work in IE6:

  <html>
   <head>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
      <style type="text/css">
       html, body { height:100%; }

         .left { 
           width:200px;
           display:inline;
           float:left;
           background:blue;
           height:100%;
         }    

         .right { 
           width:200px;
           display:inline;
           float:right;
           background:red;
           height:100%;
         }

         .center {
           margin:0 200px;
           height:100%;
         }
     </style>
   </head>
   <body>
      <div class="right">test</div>
      <div class="left">test</div>
      <div class="center">test</div>
   </body>
</html>