3 कॉलम के साथ उत्तरदायी सीएसएस पाद लेख - एचटीएमएल, सीएसएस

मेरे पास मीडिया प्रश्नों के साथ यह सीएसएस कोड है:

#footer-top {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footer-left {
width: 290px;
float: left;
padding: 5px 15px;
border-right:1px #000000 solid;
}
#footer-middle {
width: 294px; /* Account for margins + border values */
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
border-right:1px #000000 solid;
}
#footer-right {
width: 270px;
padding: 5px 15px;
float: left;
}
#footer-bottom {
clear: both;
padding: 0 15px;
}

/* for 980px or less */
@media screen and (max-width: 980px) {
#footer-left {
width: 41%;
padding: 1% 4%;
}
#footer-middle {
width: 41%;
padding: 1% 4%;
margin: 0px 0px 5px 5px;
float: right;
}
#footer-right {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
#footer-bottom {
padding: 1% 4%;
}
}

/* for 700px or less */
@media screen and (max-width: 600px) {
#footer-left {
width: auto;
float: none;
}
#footer-middle {
width: auto;
float: none;
margin-left: 0px;
}
#footer-right {
width: auto;
float: none;
}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
#footer-right {
display: none;
}
}

इसलिए मैं अपने पाद लेख को छोटे स्क्रीन आदि के लिए उत्तरदायी बनाने की कोशिश कर रहा हूं।

मैंने यहां एक पहेली बनाई है:http://jsfiddle.net/VMn7Y/ तो आप भी पूर्ण HTML देख सकते हैं, लेकिन आप के रूप मेंस्क्रीन आकार को कम करें फ़ूटर-दायां div पाद लेख-नीचे div पर प्रदर्शित होना शुरू कर रहा है। मैं इसे कैसे बना सकता हूं ताकि स्क्रीन छोटी हो जाए, पाद लेख-नीचे div को धक्का दिया जाएगा?

उत्तर:

जवाब को पूरा करने के लिए मेरी टिप्पणी के अलावा, को हटाने के लिए है height:480px से #footer-top उदाहरण ---> http://jsfiddle.net/VMn7Y/17/

आशा है कि "आप इसे कैसे चाहते थे!

सबसे पहले जब आप मीडिया प्रश्नों का उपयोग करते हैं तो बेहतर परिणाम प्राप्त करना आसान होता है यदि आप छोटे स्क्रीन आकार से शुरू करते हैं और अपना रास्ता बनाते हैं।

मैंने आपके बेड़े को ठीक कर दिया है, मूल रूप से आपको बस अपनी चौड़ाई को 30% तक बदलना था (या इस मामले में 27% आपके पैडिंग पर विचार करना)

इसे यहां देखें:

float:left;
padding: 5px 10px;
width:27%;

निश्चित jsfiddle