SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code:
    /* ---- 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; }
    }

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Position relative and z-index 99 prob

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi Ozwaldo sanchez. Welcome to the forums.

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •