SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot fenryr's Avatar
    Join Date
    Oct 2005
    Location
    germany
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making center column load before left column

    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!

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    

  3. #3
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  4. #4
    SitePoint Zealot fenryr's Avatar
    Join Date
    Oct 2005
    Location
    germany
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys, I got it!!

    Now I get the higher paying ads in the right spot


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
  •