Making center column load before left column

**fenryr** · Jul 21, 2006, 17:32

Hi all,

I can't get this to work

how do I make my center column load before the left column in a 2-column css layout..?

Any help/hints would be greatly appreciated!

**all4nerds** · Jul 21, 2006, 17:40

Hello

let negative margins do there job

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
	<style type="text/css">
	<!--
	html,body{height:100%;}
	
	*{padding:0;margin:0;}
	
	body{
	background:#a2a2a2;
	font-size:.75em;
	font-family:verdana,sans-serif;
	}
	
	head+/**/body .fc:after{ /* min-height browsers but not IE 7 */
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}
	
	div,p,h3{font-size:1em;text-align:left;}
	/* 
	.w,* html .wb{width:84em;margin:0 auto;}
	*/
	.w, * html .wb{width:64em;margin:0 auto;}
	 
	html .wra{
	background:#ffffcc;
	margin:-3em auto 0 auto;
	}
	* html .wra{height:100%;}
	head+body .wra{min-height:100%;min-width:64em;}
	
	.ab{
	height:10em;
	width:100%;
	position:absolute;
	left:50%;
	top:0;
	margin-left:-50%;
	}
	
	.he{height:7em;background:#ff8c00;}
	
	html .l{margin-top:10em;}
	.l{width:18em;background:#d8d8d8;float:left;}
	* html .l{display:inline;}
	
	
	.wlax{margin:0;}
	
	.con{
	margin-right:-200%;
	margin-left:18em;
	width:100%;
	background:#c6c6c6 ;
	}
	.conx{margin:0;}
	
	.fo{height:3em;background:#fbfbfb;}
	
	.he p,.wra p,.fo p{padding:.8em;}
	
	head+body .wra{overflow:hidden;}
	
	* html .ex{padding-bottom:32767px;margin-bottom:-32767px;}
	
	head+body .ex:after{
	content: ".";
	display:block;
	background:inherit;
	height:0;
	margin-bottom:-32767px;
	padding-top:32767px;
	}
	
	.con * {margin-right:18em}.con br{margin:0;}
	.con h3{border-left:1px solid #ffffff;border-right:1px solid #ffffff;padding:.3em;}
	
	-->
	</style>
	<!--[if IE]>
	<style type="text/css">
	*+html .fc{zoom:1;} /* IE 7 */
	*+html .ex{padding-bottom:32767px;margin-bottom:-32767px;}
	*+html {height:99%;}
	</style>
	<![endif]-->
</head>
<body class="wb">


<div class="wra w fc">

<div class="con l ex">
<p>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
<!-- 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->

Content area<br>
</p>
<h3>width check</h3>
</div>

<div class="l ex">
<p>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
<!-- 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 -->
Left Pane area<br>
</p>
</div>


</div>

<div class="fo w"><p>footer</p></div>

<div class="ab"><div class="he w"><p>header</p></div></div>

</body>
</html>

**marbly** · Jul 21, 2006, 17:56

im no guru but as I understand it you put the center column before the left (sidebar) in your HTML because the content loads in the order as it is in HTML, and then use CSS to position the columns the way you want.

I think in your case you should use "float: right" for the content column and "float: right" for the sidebar (with the content column comming first in HTML).

**fenryr** · Jul 21, 2006, 18:44

Thank you guys, I got it!!

Now I get the higher paying ads in the right spot

The SitePoint Forums have moved.

User Tag List

Thread: Making center column load before left column

Thread Tools

Display

Hybrid View

Making center column load before left column

Bookmarks

Bookmarks

Posting Permissions