SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Hybrid View
-
Jul 21, 2006, 17:32 #1
- 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!
-
Jul 21, 2006, 17:40 #2
- 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>
-
Jul 21, 2006, 17:56 #3
- 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).
-
Jul 21, 2006, 18:44 #4
- 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