Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

2 Col layout, But SEO friendly 1

Status
Not open for further replies.

DrDan1

Technical User
Oct 2, 2002
127
GB
Hi. I am attempting to create a page with a header and footer and 2 columns. The navigation column on the left should be static, while the right one will be fluid, accoring to the size of the screen or window. Simple enough to do, but for SEO reasons, I need the right column source code to appear before the left column. So essentially the right column is actually the first column. I can do this if both colum,ns are fluid, or both static, but not when mixed. Below is the closest I have managed to get, but ass soon as you lower the width of the screen, it of course goes all wrong. Has anybody done anything like this before?

Thanks,
Dan

Code:
<html>
<head>

<style type="text/css">
<!--
.container {
	float: left;
	clear: both;
	width: 100%;
}
.rightcol {
	background-color: #FFCCCC;
	float: right;
	width: 100%;
}
.leftcol {
	background-color: #0099CC;
	width: 170px;
	float: left;
}
.header {
	background-color: #000000;
	color: #FFFFFF;
}
.footer {
	background-color: #666666;
	clear: left;
}
body {
	min-width: 350px;
}
-->
</style>

</head>

<body>
    <div class="header">
        This is my header
    </div>
    
    <div class="container">
      <div class="rightcol">
            <div class="leftcol">
                This is column 2 on the left.<br />
                This will contain the menu.<br />
                This needs to be static
        	</div>
			This is column 1 on the right which will contain the main content of the page.  
            This should appear higher in the source code than the menu due to SEO reasons.
      </div>
    </div>  <!--END Container-->
    
    <div class="footer">
        This is my footer
    </div>
</body>
</html>




----------------------------------------
Knowing is not enough, we must apply. Willing is not enough, we must do.
--So said the ever wise Bruce Lee
Memorize and live by it!
 
Ah.. but I have indeed consulted my good friend Google. And I found that exact same site, however you'll notice that both those columns are fluid. I need the left navigation column to be static. The closest I have manged to find is
I'm just struggling to do the switch so that th main column is first in the source code.

----------------------------------------
Knowing is not enough, we must apply. Willing is not enough, we must do.
--So said the ever wise Bruce Lee
Memorize and live by it!
 
Soooooo close....

Code:
<html>
<head>

<style type="text/css">
<!--
.container {
	float: left;
	width: 100%;
}
.rightcol {
	background-color: #FFCCCC;
	float: left;
	margin-right: 170px;
	position: relative;
	left: 170px;
	width: 100%;
}
.leftcol {
	background-color: #0099CC;
	width: 170px;
	margin-left: -170px;
	position: relative;
	float: left;
	right: 100%;
}
.header {
	background-color: #000000;
	color: #FFFFFF;
}
.footer {
	background-color: #666666;
	clear: left;
}
body {
	min-width: 350px;
}
-->
</style>

</head>

<body>
    <div class="header">
        This is my header
    </div>
    
    <div class="container">
      <div class="rightcol">
  
			This is column 1 on the right which will contain the main content of the page.  
            This should appear higher in the source code than the menu due to SEO reasons........
      </div>
      
      <div class="leftcol">
            This is column 2 on the left.<br />
            This will contain the menu.<br />
            This needs to be static
      </div>      
    </div>  <!--END Container-->
    
    <div class="footer">
        This is my footer
    </div>
</body>
</html>

----------------------------------------
Knowing is not enough, we must apply. Willing is not enough, we must do.
--So said the ever wise Bruce Lee
Memorize and live by it!
 
I have been suitably chastised. I will be more observant next time. Thanks to you and Mark for your help.

----------------------------------------
Knowing is not enough, we must apply. Willing is not enough, we must do.
--So said the ever wise Bruce Lee
Memorize and live by it!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top