एक दूसरे के बगल में 3 डीवी संरेखित कैसे करें?

Question

मुझे एक पाद लेख कंटेनर डीआईवी में 3 डीवी बनाने की आवश्यकता है जो बाएं, मध्य और दाएं संरेखित हैं। मैंने देखा है कि सभी सीएसएस उदाहरणों ने फ्लोट का उपयोग किया है जैसा मैंने किया है। हालांकि, किसी कारण से DotNetNuke सीएसएस को सही ढंग से पार्स नहीं कर रहा है। मुझे लगता है कि बाएं फलक सही ढंग से तैर रहा है, लेकिन इसके आगे के दाएं और मध्य पैन इसके नीचे तुरंत स्थित हैं।

#footer 
{ 
width: 960px; 
border: 1px; 
} 
#footerleftpane 
{ 
width: 300px; 
float: left; 
} 
#footerRightPane 
{ 
width: 300px; 
float: right; 
} 
#footerMidPane 
{ 
padding:10px; 
} 

क्या परिवर्तन मैं ऊपर करने के लिए करना चाहिए इच्छित लेआउट प्राप्त करने के लिए:

<div id="footer"> 
<div id="footerleftpane" runat="server"> 
    <dnn:LOGO id="dnnLogo" runat="server" /> 
    <h3>Driving business performance.</h3> 
    <h3>Practical Sales and Operations Planning</h3> 
    <h3>for medium sized businesses.</h3> 
</div> 
<div id="footerRightPane" runat="server"> 
    <dnn:COPYRIGHT id="dnnCopyright" runat="server" /><br /> 
    <dnn:PRIVACY id="dnnPrivacy" runat="server" /> 
    <dnn:TERMS id="dnnTerms" runat="server" /> 
</div> 
<div id="footerMidPane" runat="server"> 
</div> 
</div> 

यहाँ मेरी सीएसएस फ़ाइल के संबंधित भाग है: यहाँ मेरी ascx फ़ाइल से एक टुकड़ा है?

अद्यतन: मैंने सुझाए गए परिवर्तन की कोशिश की लेकिन लेआउट अभी भी this salesandoperationsplanning.net page that demonstrates what I want पर देखा गया काम नहीं कर रहा है।

Answer 1

सबसे पहले, आपको अपने HTML में दिखाई देने वाले तत्वों के नामों को लक्षित करना चाहिए। ऐसा लगता है कि आपका सीएमएस कुछ प्रकार के उपसर्ग जोड़ता है और आपकी आईडी मेल नहीं खाती है। इसके अलावा, के रूप में आप एक निश्चित चौड़ाई कंटेनर बीच कंटेनर में एक चौड़ाई गुजर नहीं द्वारा उत्पन्न परेशानियों के किसी काम का नहीं है का उपयोग कर रहे हैं (आप #footerleftpane है लेकिन यह #dnn_footerleftpane के रूप में renders)

। इसे चौड़ाई दें और देखें कि यह काम करता है या नहीं। यदि यह नहीं है कि आप दो और तरीकों का प्रयास कर सकते हैं, यदि आपके ब्लॉक सही स्रोत क्रम में हैं (बाएं, केंद्र, दाएं)।

1. आप उन्हें सभी बाएं तैर सकते हैं, यह सुनिश्चित कर सकते हैं कि इसकी चौड़ाई और पैडिंग कंटेनर पर फिट हों।

   #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane { 
       width: 300px; 
       float: left; 
       .... 
   } 
   

2. आप प्रदर्शन का उपयोग कर सकते हैं: इनलाइन-ब्लॉक, भी

   #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane { 
       .... 
       display: inline-block; 
       ... 
   } 
   

Answer 2

आपका पाद लेख कंटेनर 960 पिक्सल है कंटेनर पर अपनी चौड़ाई और paddings फिट करने के लिए सुनिश्चित करें। आपका बायां & दायां तत्व 300 पिक्सल है लेकिन आपने अपने मध्य तत्व के लिए चौड़ाई निर्दिष्ट नहीं की है, इसलिए यह अपने माता-पिता की पूरी चौड़ाई तक डिफ़ॉल्ट हो जाती है, जो स्वयं को एक नई पंक्ति में स्वयं ही धक्का देती है।

पैडिंग घटाएं और मध्य तत्व 340 पिक्सेल से अधिक नहीं हो सकता है।

http://jsfiddle.net/y8e4T/

http://jsfiddle.net/y8e4T/show

#footerMidPane{ 
    width: 340px; 
    float: left; 
    padding: 10px; 
}​ 

Answer 3

यह स्थिति, आयाम और गलत सीएसएस घोषणाओं की बात है।

1) स्थिति आपके पृष्ठ स्रोत में दाईं ओर के बाद आपके पास मध्य फलक है!

2) आयाम मैंने एक त्वरित परीक्षण किया और आप आगे की जांच कर सकते हैं, लेकिन 300px पक्ष पैन की चौड़ाई के लिए बहुत अधिक है। सामग्री में कुछ शायद चौड़ाई को संशोधित करता है।

3) सीएसएस घोषणाएं डॉटनेटनेट (वास्तव में सभी एएसपी.Net नियंत्रण करते हैं) सर्वर-साइड कंट्रोल (रनैट = "सर्वर" के रूप में घोषित) को एक अद्वितीय आईडी निर्दिष्ट करते हैं, इस प्रकार आप अपने सीएसएस में #footerleftpane होने की उम्मीद करते हैं #dnn_footerleftpane होगा।

सिर्फ अपने मध्य फलक repositiong ... अन्य दो के बीच में होने के बाद, इस तरह अपने सीएसएस संशोधित:

#footer 
    { 
     width: 960px; 
     height: auto; 
     margin:0; 
     padding:0; 
     border: 0; 
    } 

    #dnn_footerleftpane, #dnn_footerRightPane{ 
     width: 290px; 
     float: left; 
    } 

    #dnn_footerMidPane 
    { 
     width: auto; 
     float: left; 
    }