माता-पिता की ऊंचाई को निर्दिष्ट किए बिना बच्चे की दिव्यांगता को 100% माता-पिता की ऊंचाई के लिए कैसे मजबूर किया जाए?

Question

मेरे पास निम्नलिखित संरचना के साथ एक साइट है:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

नेविगेशन बाईं ओर है और सामग्री div दाईं ओर है। सामग्री div की जानकारी PHP के माध्यम से खींची जाती है, इसलिए यह हर बार अलग है।

मैं नेविगेशन को लंबवत रूप से कैसे माप सकता हूं ताकि उसकी ऊंचाई सामग्री div की ऊँचाई के समान हो, चाहे कोई भी पृष्ठ लोड क्यों न हो?

Comments

माता-पिता पर प्रदर्शन तालिका का उपयोग करें और बच्चे पर तालिका-सेल प्रदर्शित करें। यह तब तक बच्चा बनेगा जब तक माता-पिता हैं। देखें stackoverflow.com/q/22712489/3429430

— user31782

आप बस display: flex; align-items: stretch;div # मुख्य के लिए सेट कर सकते हैं । और div # सामग्री के लिए उपयोग न करेंheight: 100%

— इगोर

Answer 1

नोट : यह उत्तर फ्लेक्सबॉक्स मानक के समर्थन के बिना विरासत ब्राउज़रों पर लागू है। आधुनिक दृष्टिकोण के लिए, देखें: https://stackoverflow.com/a/23300532/1155721

---

मेरा सुझाव है कि आप क्रॉस-ब्राउज़र सीएसएस और नो हैक्स के साथ समान ऊँचाई कॉलम पर एक नज़र डालें ।

मूल रूप से, ब्राउज़र के संगत तरीके से CSS के साथ ऐसा करना तुच्छ नहीं है (लेकिन तालिकाओं के साथ तुच्छ) इसलिए अपने आप को एक उपयुक्त पूर्व-पैक समाधान ढूंढें।

इसके अलावा, उत्तर इस बात पर भिन्न होता है कि आप 100% ऊँचाई या समान ऊँचाई चाहते हैं। आमतौर पर यह समान ऊंचाई है। यदि यह 100% ऊंचाई है तो उत्तर थोड़ा अलग है।

Comments

यह एक अच्छा समाधान की तरह दिखता है जब तक आप एक सीमा नहीं खींचते हैं border:1px solid blueजैसे container2: नीले रंग की सीमा पहले दो स्तंभों पर है, दूसरे स्तंभ पर नहीं जैसा कि आपने अपेक्षा की थी।

— जूलियन क्रोनग

@bfritz, एक बेहतर समाधान का उपयोग करना होगाdisplay:table

— Siler

Answer 2

माता पिता के लिए:

display: flex;

आपको कुछ उपसर्ग, http://css-tricks.com/using-flexbox/ जोड़ना चाहिए ।

संपादित करें: जैसा कि @Aad Garner ने उल्लेख किया, संरेखित-आइटम: खिंचाव; आवश्यकता नहीं है। इसका उपयोग माता-पिता के लिए भी है, बच्चों के लिए नहीं। यदि आप बच्चों को स्ट्रेचिंग परिभाषित करना चाहते हैं, तो आप संरेखित करें।

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

Comments

IE11 फ्लेक्सबॉक्स और ऊंचाइयों के साथ अच्छी तरह से नहीं खेलता है। यहां "ज्ञात मुद्दों" पर क्लिक करें: caniuse.com/#feat=flexbox

— adamdport

@SuperUberDuper अच्छी तरह से आप इसे बूटस्ट्रैप में इस रूप में उपयोग कर सकते हैं: jsfiddle.net/prdwaynk लेकिन अगर मैं तुम थे, तो मैं नींव का उपयोग करूँगा जो flexbox के साथ तैयार है: Foundation.zurb.com/sites/nocs/xy-grid.html BS4 फ्लेक्सबॉक्स भी होगा, लेकिन यह अभी भी अल्फा में है, और मुझे लगता है कि नींव वैसे भी बेहतर है।

— अनीपे

यदि आप उपयोग कर रहे हैं align-items: centerतो आपको जिस चीज की जरूरत है, उसे खींचने की जरूरत हैalign-self: normal

— डोमिनिक

यह एक सही जवाब नहीं है, क्यूज इसको माता-पिता की ऊंचाई निर्धारित करने की आवश्यकता है। प्रश्न 'माता-पिता की ऊंचाई निर्दिष्ट किए बिना?'।

— SkuraZZ

@Aiphee डाउनवोटिंग क्योंकि यह प्रतीत होता है कि आपने मूल प्रश्न पाठ में माता-पिता की ऊँचाई को वहीं सेट नहीं करने के बारे में भाग नहीं देखा है , फिर भी आपका "समाधान" ठीक यही करता है।

— टायलरिज्म

Answer 3

यह एक निराशाजनक मुद्दा है जो हर समय डिजाइनरों से निपटा जाता है। चाल यह है कि आपको अपने CSS में BODY और HTML पर ऊँचाई 100% पर सेट करने की आवश्यकता है।

html,body {
    height:100%;
}

यह प्रतीत होता है कि निरर्थक कोड ब्राउज़र को परिभाषित करने के लिए है कि 100% का क्या मतलब है। निराशा, हाँ, लेकिन सबसे सरल तरीका है।

Comments

सिवाय यह हमेशा काम नहीं करता है, उदाहरण के लिए यदि आपके पास एक निरपेक्ष पद के अंदर एक रिश्तेदार तैनात तत्व है, तो यह अब नहीं है।

— टिम

इसके अलावा, यदि आप विंडो के दाईं ओर स्क्रॉलबार से छुटकारा पाना चाहते हैं (फ़ायरफ़ॉक्स v28 में दिखाई देता है), खिड़की को कुछ श्वास कक्ष दें html { height: 100%; } body { height: 98%; }:।

— क्रिस मिडलटन

यह केवल तभी काम करता है जब सभी माता-पिता की ऊंचाई 100% हो, यह केवल html और शरीर को सेट करने के लिए पर्याप्त नहीं है, सभी माता-पिता को एक ऊंचाई निर्धारित करनी चाहिए।

— राडुम

Answer 4

मुझे लगता है कि अच्छी तरह display: table-cell;से float: left;काम करने के बजाय दो कॉलम सेट करना ।

Comments

एमएस खुद इसे अब और समर्थन नहीं करते हैं, अगर इससे किसी को अपने ग्राहकों को समझाने में मदद मिलती है ...

— हेराल्डमोनकी

यह स्वीकृत उत्तर होना चाहिए। टाइम्स बदल गया है, यह उत्तर सभी ब्राउज़रों में काम करता है (सफारी 5.1.17 में छोटे क्विक पर)। CSS की दो लाइनें और आपके पास तुरंत प्रभाव है जो आप बिना किसी ड्रॉ बैक के खोज रहे हैं जिसके बारे में मैं सोच सकता हूं।

— कॉलमेटवान

इस उत्तर को लहराओ। इसमें अपनी पीठ रखो!

यह सबसे अच्छा जवाब है। हाँ, हम ऐसा करने के लिए एक तालिका बना सकते हैं, लेकिन इसका सारणीबद्ध डेटा नहीं है, इसके बजाय हम डिव्स का इलाज करते हैं जैसे कि वे टेबल सेल थे ... ब्रेंट!

— Derokorian

यह वास्तव में मुझे एक अलग परिदृश्य के लिए सही दिशा में ले गया। यदि कोई व्यक्ति फ़ायरफ़ॉक्स या एज में फ्लेक्स कंटेनर के साथ काम करने के लिए संघर्ष कर रहा है, तो बस सेट करने के लिए याद रखें: तालिका प्रदर्शित करने के लिए तत्व से पहले। मुझसे मत पूछो क्यों लेकिन यह इसे ठीक करता है।

— CGodo

Answer 5

अगर आपको इस बात से ऐतराज नहीं है कि अनपेक्षित रूप से शॉर्ट कंटेंट डिव की स्थिति में नैविगेशन डिव को क्लिप किया जा रहा है, तो कम से कम एक आसान तरीका है:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Elvesise वहाँ अशुद्ध-स्तंभ तकनीक है।

Comments

एक टन धन्यवाद, आपने मेरा दिन बचाया। पता नहीं था कि कोई भी ऊपर और नीचे दोनों को परिभाषित कर सकता है और यह इस तरह से काम करेगा।

— rubish

इससे कंटेनर की सामग्री का आकार बदलना बंद हो जाएगा।

— ड्रीमवेव

+1 क्योंकि यह विशेष रूप से ओपी के प्रश्न को संबोधित करता है "माता-पिता की ऊँचाई को निर्दिष्ट किए बिना 100% माता-पिता की दिव्यांगता पर बल कैसे दें?" मेरी समस्या को स्तंभों की आवश्यकता नहीं थी (जो कि प्रश्न के विवरण में वर्णित हैं, लेकिन मुख्य शीर्षक में नहीं हैं) बल्कि एक दूसरे के पीछे एक div है। यह उत्तर दोनों अनुप्रयोगों में काम करता है।

— ल्यूक

यह चयनित उत्तर होना चाहिए

— गेब्रियल

Answer 6

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

Comments

मुझे कहना होगा कि मैं इस तरह के समाधान की तलाश में था। मृत सरल और इतना स्पष्ट है कि किसी ने भी इसका पता नहीं लगाया। बधाई @Roman!

— ग्रेग्री

Answer 7

jQuery का उपयोग:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

Comments

Math.max()यहां आपका दोस्त होगा।

— एलेक्स

सीएसएस को मेरे लिए सभी मामलों में काम करने के लिए नहीं मिला, वास्तव में बस एक त्वरित सुधार की आवश्यकता थी। यह सबसे मानक दृष्टिकोण नहीं हो सकता है , लेकिन इसने काम को ठीक किया। धन्यवाद! : -]

JQuery के cssफ़ंक्शन का उपयोग करते समय, आप स्क्रीन और प्रिंट मीडिया के बीच अंतर नहीं कर सकते, जैसा कि आप आमतौर पर शुद्ध CSS समाधानों का उपयोग करते समय करते हैं। इस प्रकार, आपके पास मुद्रण समस्याएँ हो सकती हैं।

— जूलियन क्रोनग

Answer 8

नीचे के मार्जिन को 100% बनाने की कोशिश करें।

margin-bottom: 100%;

Comments

या गद्दी-तल: 100%; यह सटीक नहीं है लेकिन यह कुछ स्थितियों के लिए अच्छा काम करता है।

— जेसन

गद्दी-नीचे मेरे मामले में चाल है। यह समाधान @Roman Kuntyi द्वारा पोस्ट किए गए के समान है।

— ग्रेग्री

Answer 9

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

देखो इस उदाहरण ।

Comments

यह वही है जो मैं कर रहा था, एक उत्तर जोड़ना चाहता था। मैं भी उपयोग कर रहा था height: 100%लेकिन यह पता चला कि इसकी आवश्यकता नहीं थी।

— 13

Answer 10

height : <percent>केवल तभी काम करेगा जब आपके पास शीर्ष स्तर पर पिक्सेल, ईएमएस इत्यादि में एक निश्चित ऊंचाई के साथ निर्दिष्ट प्रतिशत ऊंचाई के साथ सभी मूल नोड्स हों। इस तरह, ऊंचाई आपके तत्व तक कम हो जाएगी।

आप html और शरीर के तत्वों को 100% निर्दिष्ट कर सकते हैं क्योंकि @Travis ने पहले कहा था कि पृष्ठ की ऊँचाई आपके नोड्स के लिए नीचे है।

Answer 11

लंबे खोज और प्रयास के बाद, मेरी समस्या के अलावा कुछ भी हल नहीं हुआ

style = "height:100%;"

बच्चों को div पर

और माता पिता के लिए यह लागू होते हैं

.parent {
    display: flex;
    flex-direction: column;
}

भी, मैं बूटस्ट्रैप का उपयोग कर रहा हूं और इसने मेरे लिए उत्तरदायी को भ्रष्ट नहीं किया।

Comments

मेरे flex-direction: column;लिए काम करने के लिए मुझे इसे हटाना पड़ा ।

— रिचर्ड हेजेज

Answer 12

इस लेख में वर्णित विधि के आधार पर मैंने बनाया है। कम गतिशील समाधान:

एचटीएमएल:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

कम:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

Answer 13

display: gridमाता-पिता में जोड़ें

Answer 14

मुझे पता है कि यह सवाल किए जाने के बाद का समय है, लेकिन मुझे एक आसान समाधान मिला और मुझे लगा कि कोई इसका इस्तेमाल कर सकता है (गरीब अंग्रेजी के बारे में खेद)। ये रहा:

सीएसएस

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

एचटीएमएल

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

सरल उदाहरण है। ध्यान दें कि आप जवाबदेही में बदल सकते हैं।

Comments

ओह, मैं भूल गया: यदि आप बीच में .sidebar सामग्री को संरेखित करना चाहते हैं, तो बस "वर्टिकल-अलाइन: टॉप" को "वर्टिकल-अलाइन: मिडल" में बदलें।

— पौला फ्लेक्स

Answer 15

मेरा समाधान:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

Answer 16

प्रश्न के शीर्षक और सामग्री में थोड़ा विरोधाभास है। शीर्षक एक अभिभावक div की बात करता है, लेकिन सवाल यह ध्वनि करता है जैसे आप चाहते हैं कि दो भाई div (नेविगेशन और सामग्री) समान ऊंचाई हो।

क्या आप (ए) चाहते हैं कि नेविगेशन और सामग्री दोनों मुख्य की ऊँचाई का १००% होना चाहिए, या (ख) चाहते हैं कि नेविगेशन और सामग्री एक ही ऊँचाई की हो?

मैं मानूँगा (b) ... यदि ऐसा है, तो मुझे नहीं लगता कि आप इसे अपनी वर्तमान पृष्ठ संरचना (कम से कम, शुद्ध CSS के साथ और कोई स्क्रिप्टिंग नहीं) कर पाएंगे। आपको शायद ऐसा कुछ करने की आवश्यकता होगी:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

और जो भी नेविगेशन फलक की चौड़ाई है, उसके बाएं हिस्से के लिए सामग्री div सेट करें। इस तरह, सामग्री की सामग्री नेविगेशन के दाईं ओर है और आप सामग्री की ऊंचाई का 100% होने के लिए नेविगेशन डिव सेट कर सकते हैं।

संपादित करें: मैं इसे पूरी तरह से अपने सिर में कर रहा हूं, लेकिन आपको शायद नेविगेशन डिव के बाएं मार्जिन को नकारात्मक मान पर सेट करने की आवश्यकता होगी या इसे 0 से 0 पर छोड़ना होगा। समस्या यह है कि इसे बंद करने के कई तरीके हैं लेकिन उनमें से सभी सभी ब्राउज़रों के साथ संगत नहीं हैं।

Answer 17

[एक अन्य जवाब में Dmity के कम कोड का जिक्र करते हुए] मैं अनुमान लगा रहा हूं कि यह किसी तरह का "छद्म कोड" है?

मैं जो कुछ भी समझता हूं, वह फॉक्स-कॉलम तकनीक का उपयोग करने की कोशिश करता है जो चाल करना चाहिए।

http://www.alistapart.com/articles/fauxcolumns/

उम्मीद है की यह मदद करेगा :)

Comments

उत्तरों के क्रम को क्रमबद्ध करने के आधार पर, यह बताना कठिन है कि "यह" क्या संदर्भित करता है ... मुझे अनुमान है कि यह दिमित्री के कोड के बारे में है। इस प्रकार, यह टिप्पणी उनके जवाब के नीचे की टिप्पणी से संबंधित है! और, आपकी जानकारी के लिए, यह छद्म कोड नहीं है, यह कम भाषा में कोड है, सीएसएस को प्रक्रियात्मक तरीके से परिभाषित करने का एक तरीका है।

— फीलो

Answer 18

यह ट्रिक काम करती है: HTML के अपने सेक्शन में अंतिम तत्व को स्पष्ट शैली के साथ जोड़ना: दोनों;

    <div style="clear:both;"></div>

इससे पहले की हर चीज ऊंचाई में शामिल होगी।

Answer 19

position: absolute;बच्चे को देने से मेरे मामले में काम हुआ

Answer 20

आप CSS Flexbox का उपयोग करें

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

Answer 21

यह जवाब सीएसएस फ्लेक्सबॉक्स और ग्रिड के बाद से आदर्श नहीं है जहां सीएसएस को लागू किया गया है। हालाँकि यह अभी भी एक कार्यशील समाधान है

एक छोटी स्क्रीन पर आप शायद ऊंचाई ऑटो को रखना चाहेंगे क्योंकि col1, col2 और col3 एक दूसरे पर ढेर हो जाते हैं।

हालाँकि, एक मीडिया क्वेरी ब्रेकपॉइंट के बाद आप चाहेंगे कि सभी स्तंभों के बराबर ऊँचाई के साथ एक-दूसरे के बगल में दिखाई दें।

1125 पीएक्स केवल खिड़की की चौड़ाई के विखंडन का एक उदाहरण है जिसके बाद आप सभी स्तंभों को एक ही ऊंचाई पर सेट करना चाहेंगे।

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

यदि आप की जरूरत है, तो आप निश्चित रूप से अधिक ब्रेकप्वाइंट सेट कर सकते हैं।

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

Answer 22

मेरे पास एक ही मुद्दा था, यह हकाम फोस्तोक के जवाब पर आधारित था, मैंने एक छोटा सा उदाहरण बनाया है, कुछ मामलों में इसे जोड़ने के लिए display: flex;और flex-direction: column;मूल कंटेनर पर काम किए बिना हो सकता है

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

Answer 23

जैसा कि पहले दिखाया गया है, फ्लेक्सबॉक्स सबसे आसान है। जैसे।

#main{ display: flex; align-items:center;}

यह मूल तत्व के भीतर सभी बाल तत्वों को केंद्र में संरेखित करेगा।

Comments

यह इस सवाल का जवाब नहीं देता है, वे समान ऊंचाई चाहते हैं, सामग्री को केंद्रित नहीं कर रहे हैं

— रयान एम

Answer 24

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

से:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

बूटस्ट्रैप को बताता है लेकिन इसका उपयोग करने के लिए आपको बूटस्ट्रैप की आवश्यकता नहीं है। इस पुराने प्रश्न का उत्तर देना, क्योंकि यह मेरे लिए काम करता है, और इसे लागू करना बहुत आसान लगता है।

यह वही उत्तर था जो मैंने इस प्रश्न को प्रदान किया था

Answer 25

यहां position: absoluteकंटेंट कंटेनर के आधार पर पुराने फैशन डेमो औरposition: relative पेरेंट कंटेनर के ।

आधुनिक तरीके से इसे करने के लिए - फ्लेक्स बॉक्स सबसे अच्छे हैं।

Answer 26

ऐसा करने का सबसे आसान तरीका सिर्फ इसे नकली बनाना है। 2004 के डैन सेडरहोम के इस लेख की तरह , ए लिस्ट शिवाय ने इसे बड़े पैमाने पर कवर किया है ।

यहां बताया गया है कि मैं आमतौर पर यह कैसे करता हूं:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

आप आसानी से इस डिज़ाइन पर एक हेडर को किसी अन्य डिव में #container रैप करके, हेडर डिव को # कंटेनर के सिबलिंग के रूप में एम्बेड करके, और मार्जिन और चौड़ाई शैलियों को पेरेंट कंटेनर में ले जाकर जोड़ सकते हैं। इसके अलावा, सीएसएस को एक अलग फाइल में स्थानांतरित किया जाना चाहिए और इनलाइन नहीं रखा जाना चाहिए, आदि। अंत में, स्थिति उपहास पर स्पष्ट वर्ग पाया जा सकता है ।