Home/ Questions/Q 156803
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T10:23:29+00:00

I was wondering if there were any simple examples that did the following *

  • 0

I was wondering if there were any simple examples that did the following

     * A right and a left fixed column with a fluid center.        With full height and width and a header and footer.     * A single left fixed column with a fluid content column 2.        With full height and width and a header and footer.     * A single right fixed column with a fluid content column.       With Full height and width and a header and footer.

I’ve tried some methods (such as the ones listed on listapart) but they seemed really complicated and they used a lot of divs, or they just didn’t support padding.

Thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. The examples you found in alistapart.com are as complicated as they need to be, and every serious example that you can find about those layouts supports padding. You will find (and already found) a lot of good examples about it in the internet, just spend some time trying to understand them and you will see that they are not so complicated, in the end.

    Anyway, I have a good demo layout similar to the second you are looking for, here: http://www.meiaweb.com/test/BMS_DM_NI/

    Basically, the html is this:

    <body>         <div id='head'>             <h1>Title</h1>         </div>         <div id='main'>             <div id='navigation'>                 <!-- navigation content -->              </div>              <div id='content'>                 <h2>Content Title</h2>                 <p>                    <!-- main content here -->                 </p>             </div>         </div>     </body>

    And the css is:

    html {     overflow: auto;     height: 100%; } body {     margin: 0;     padding: 0;     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;     width: 100%;     height: 100%;     line-height: 1.5em; }  #head {     height: 20px;     background-color: #666;     color: #AAA;     padding: 20px 20px; }   #navigation {     width: 210px;     padding: 20px 20px;     background: #efefef;     border: none;     border-right: solid 1px #AAA;     float: left;     overflow: auto; }  #content {     margin-left: 250px;     padding: 20px 20px; }

    I think it’s simple enough, and it works in all modern browsers.

    • 0