CSS से कॉलम लेआउट बनाएं

कॉलम लेआउट बनाने के लिए:

पूरे डॉक्यूमेंट के मार्जिन और पैडिंग को निम्नानुसार सेट करें:

<style>
  <!--
    body {
      margin: 9px 9px 0 9px;
      padding: 0;
      background: #FFF;
    }
  -->
</style>

पीले रंग के साथ एक कॉलम परिभाषित करें और बाद में हम इस नियम को एक <div> से अटैच करेंगे:

<style>
  <!--
    #level0 {
      background: #FC0;
    }
  -->
</style>

आइए अब level0 के अंदर एक और डिवीजन परिभाषित करें:

<style>
  <!--
    #level1 {
      margin-left: 143px;
      padding-left: 9px;
      background: #FFF;
    }
  -->
</style>

एक और डिवीजन नेस्ट करें और पूरा कोड इस तरह होगा:

<style>
  body { margin: 9px 9px 0 9px; padding: 0; background: #FFF; }
  #level0 { background: #FC0; }
  #level1 { margin-left: 143px; padding-left: 9px; background: #FFF; }
  #level2 { background: #FFF3AC; }
  #level3 { margin-right: 143px; padding-right: 9px; background: #FFF; }
  #main { background: #CCC; }
</style>

<body>
  <div id="level0">
    <div id="level1">
      <div id="level2">
        <div id="level3">
          <div id="main">
            अंतिम कंटेंट यहां जाता है...
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

व्याख्या: यह नेस्टेड डिव्स का उपयोग करके एक मल्टी-कॉलम लेआउट बनाता है जहां प्रत्येक लेवल एक कॉलम या साइडबार का प्रतिनिधित्व करता है। आधुनिक CSS में flexbox या grid का उपयोग करना अधिक सरल और प्रभावी है।