My div is hiding!

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; }
}

Position relative and z-index 99 prob

Thanks Eric - that brings the main div infront of the nav but I would like it to float underneath it - which is were i’m struggling.

I don’t see any code in there that says nav. Nor any html. Easier just to put it up live. You’ll get an answer in 2 seconds

Hi Ozwaldo sanchez. Welcome to the forums. :slight_smile:

Yes, we need to see the HTML, too—but really a link would be better.