Negative margin Responsive fluid / fixed columns - Nav not working

Negative margin Responsive fluid / fixed column - Nav not working

Hi all

I have a demo here to illustrate my problem.

http://www.ttmt.org.uk/forum/

It’s a simple responsive 3 column layout where the two
navigation columns are fixed width and the content column is fluid.

I have done this using negative right margin on the content
column that the fixed width columns slide into.

When the page is resized the navigation columns should move above the content.

My problem is the links in the fixed width columns don’t work. When the page resizes
and the nav moves above the content the nav moves again.

I tried putting the html for the fixed width columns below the content and the nav works again
but when the window is resized the nav falls below the content.

http://www.ttmt.org.uk/forum/index1.html

I’m assuming the nav isn’t working because it’s inside the content but how do I fix it.


<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <title>Title of the document</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="robots" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

  <link rel="stylesheet" href="css/master.css" />

  <!--[if lt IE 9]>
	     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }
    li{
      list-style:none;
    }
    body{
    	background:#f5f5f3 url('../images/bg.png') 0 0 repeat-x;
    	font:10px sans-serif;
    	font-size:1em;
    }
    a{
    	color:black;
    	text-decoration:none;
    }
    #pageWrap{
    	max-width:1000px;
    	margin:0 auto;
    	border-left: 20px transparent solid;
    	border-right: 20px transparent solid;
    }
    /*-----------------
     Structure
    -------------------*/

    header {
      height:50px;
    }

    #rightCol{
    	float:right;
    	width:100%;
    	margin-left:-386px;
    }

    #rightCol #rightCol-inner{
    	margin-left:386px;
    	background:#fff;
    	padding:20px;
    }

    #leftCol,
    #middleCol{
    	background:#eee;
    	float:left;
    }

    #leftCol{
    	width:141px;
    	margin:0 10px 0 0;
    }
    #middleCol{
    	width:225px;
    }

    #leftCol nav,
    #middleCol ul{
    	padding:10px;
    }

    #leftCol nav li,
    #middleCol ul li{
    	border-top:1px solid black;
    }
    #leftCol li a,
    #middleCol ul li a{
    	display:block;
    	padding:10px 12px;
    	font-size:1em;
    	margin:4px 0;
    	color:#555;
    }
    #leftCol li a:hover,
    #middleCol li a:hover{
    	background:red;
    }


    /*--------------------
    	Media Queries
    ---------------------*/

    @media only screen and (max-width : 780px) {

    	#rightCol{
    		float:none;
    		width:100%;
    		margin:0;
    	}

    	#rightCol #rightCol-inner{
    		margin:0;
    		background:#fff;
    	}

    	#leftCol,
    	#middleCol{
    		float:none;
    		display:block;
    		margin:10px 0;
    		width:100%;
    	}

    	#leftCol nav{
    		float:none;
    	}
    	#leftCol nav li,
      #middleCol ul li{
        display:inline-block;
      	border:0;
      }

    	#leftCol li a,
    	#middleCol li a{
    		display:inline-block;
    		padding:10px 12px;
    		border-right: 1px solid #999;
    		border-top:0;
    		border-bottom:0;

    	}
    }

  </style>

  </head>

<body>

    <div id="pageWrap">
      <header>
      </header>

      <div id="pageContent" class="group">

        <aside id="leftCol">
          <nav>
            <ul>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </nav>
        </aside><!--leftCol-->

        <aside id="middleCol">
          <ul id="second-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </aside><!--middleCol-->



        <section id="rightCol">
          <div id="rightCol-inner">

            <div  class="serviceText">
              <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
              <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

              <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

            </div>

          </div><!-- #rightCol-inner -->

        </section><!--rightCol-->

      </div><!-- pageContent-->

    </div><!-- #pageWrap -->


</body>

</html>


Hi,

Just give the left and middle column position:relative and apply a z-index to keep them above the right column.


#leftCol,#middleCol{
position:relative;
z-index:2;
}

The z-index:2 isn’t absolutely necessary because the position:relative will give them priority over the non positioned element anyway.

Elements will normally be laid out in the flow of the document with those coming later in the html having more priority than earlier elements where overlaps are concerned. Because your right float is last in the html it effectively overlaps the first two columns and stops the links from being active as it lays on top of the columns albeit with space created by the negative margin.

Thanks Paul