Guys - probably a bit of a noob question but it’s getting close to me ripping out my hair!!!
am setting a responsive site, with vertical nav on left hand side and content displayed to right. all shrinks down nicely until I want it to go full width at small screen sizes.
What i’m getting is both divs filling the window at 100% but the main content is sitting behind the navigation… which kinda defeats the object of it being there!!!
Have tried as many things as i can think of with floating / clearing / positioning / et al but nothing is working …
Can anyone please put me out of my mystery by telling me the stupid but simple thing i’ve missed.
Thanx.
/* ---- FRAMEWORK ---- */
html { overflow-y: scroll;}
body { font-family: helvetica, sans-serif; color: #82c717; background-color:#222; background-image: url(http://fusionperformingarts.co.uk/wordpress/wp-content/uploads/2013/01/Fusion-RepeatBg.jpg); background-repeat: repeat;}
#wrap { background-color: #f3c;/*#222;*/ min-height: 940px; height: auto !important; height: 940px;
/*-moz-box-shadow: 0px 6px 6px 6px #111; -webkit-box-shadow: 0px 6px 6px 6px #111; box-shadow: 0px 0px 6px 6px #111;*/}
#sidebar-primary { float: left; position: absolute; background-color: #000; border-left: solid 3px #82b717; border-right: solid 3px #81b717; border-bottom: solid 3px #81b717;
/*min-height: 700px; height: auto !important; height: 700px;*/
/*-moz-box-shadow: 0px 6px 6px 6px #111; -webkit-box-shadow: 0px 6px 6px 6px #111; box-shadow: 0px 0px 6px 6px #111;*/}
#sidebar-primary ul li a { color: #82c717; text-decoration: none;}
#sidebar-primary ul li a:hover { color: #fff; }
#main { float: right; }
#page { width: 100%; margin: 0px; padding: 0px; float: left; }
#content { font-size: 14px; border: 3px solid #82c717;
/*-moz-box-shadow: 0px 6px 6px 6px #111; -webkit-box-shadow: 0px 6px 6px 6px #111; box-shadow: 0px 0px 6px 6px #111;*/}
#sidebar-secondary { float: left; background-color: #222; border-top: 3px solid #82c717;
/*-moz-box-shadow: 0px 6px 6px 6px #111; -webkit-box-shadow: 0px 6px 6px 6px #111; box-shadow: 0px 0px 6px 6px #111;*/}
#single { border: 3px solid #82c717;
/*-moz-box-shadow: 0px 6px 6px 6px #111; -webkit-box-shadow: 0px 6px 6px 6px #111; box-shadow: 0px 0px 6px 6px #111;*/}
#footer { width: 100%; float: left; clear: both; margin: 30px 0 0 200px; padding: 30px 20px; border-top: 1px solid #82c717;}
/* ---- Responsiveness ---- */
/* - FULL SIZE - */
#wrap { max-width: 1024px; width: auto !important; width: 1024px; margin: -18px auto 40px auto; padding: 0px;}
#sidebar-primary { width: 180px; margin: 0px 10px 60px 10px; padding: 0px; }
#sidebar-primary .logo a img{ width: 100%;}
#sidebar-primary ul { margin: 10px 0px;}
#sidebar-primary ul li { margin: 5px 0px;}
#sidebar-primary ul li a { display: block; margin: 10px 10px; font-size: 14px;}
#sidebar-primary ul h3 { display: block; margin: 5px -3px; padding: 5px 10px; font-size: 14px; font-weight: bold; color: #000; background-color: #82c717;}
#sidebar-primary ul .textwidget { display: block; float: left; clear: both; margin: 0 5px 20px 10px; font-size: 9px; height: auto; }
#main { background-color:#06F; float: left; width: 77%; margin: 140px 0px 0px 210px; font-size: 14px; }
#content, #single { width: auto; margin: 0px; padding: 15px; }
#sidebar-secondary { width: 77%; margin: 10px 0px 0px 210px; }
#sidebar-secondary ul li { display: inline-block; float: left; margin: 15px 15px 10px 5px;}
@media screen and (max-width: 960px) {
#wrap { width: 95%; margin: -18px auto 40px auto;}
#sidebar-primary { width: 160px;}
#sidebar-primary ul li a {}
#sidebar-primary h3 {}
#main { width: 77%; margin: 128px 0 0 180px; font-size: 14px;}
#content, #single { width: auto; margin: 0px; padding: 15px; }
#sidebar-secondary { width: 77%; margin: 10px 0px 0px 180px;}
}
@media screen and (max-width: 750px) {
#wrap { }
#sidebar-primary { width: 140px;}
#main { width: 75%; margin: 112px 0 0 160px; font-size: 12px;}
#content, #single { width: auto; margin: 0px; padding: 15px; }
#sidebar-secondary { width: 75%; margin: 10px 0px 0px 160px; }
}
@media screen and (max-width: 600px) {
#wrap { }
#sidebar-primary .logo a img { width: 120px;}
#sidebar-primary { width: 100%; float: left; margin: 0 0 10px 0; /*height: auto;*/ dispaly: block; border: none; }
#sidebar-primary ul { }
#sidebar-primary ul li { }
#sidebar-primary ul li a { display: inline-block; float: left; margin: 0 auto; padding: 10px 20px; }
#sidebar-primary ul li #socialmedia-container { float: left; margin: -10px 10px 0 0; }
#sidebar-primary ul h3 { display: block; width: 96%; float: left; clear: both; text-align: center; margin: 5px 0 5px 0; }
#sidebar-primary ul .textwidget { display: block; width: 100%; float: left; clear: both; margin: 0px 0px 0px 0px; font-size: 9px; text-align: center; }
#main { width: 100%; display: block; float: left; clear: both !important; margin: 10px 0 10px 0px; padding: 0; }
#content, #single { width: auto; margin: 0px; padding: 15px; }
#sidebar-secondary { display: block; float: left; clear: both; width: 99%; margin: 10px auto; }
}