Forum Moderators: not2easy
Note: I have tried placing the middle content first with no float tags, then placing the left sidebar next with a left float and then the right sidebar with a right float but it didn't work (they just got bumped down to the bottom of the page). Any way to fix this? Thanks!
Left Sidebar¦ Middle Content ¦ Right Sidebar
LNaviagtion ¦ Content, Conte¦ Random Stuff
Thanks!
[edited by: CWebguy at 7:29 pm (utc) on April 29, 2008]
Wrap the Middle Content and Right Sidebar in a new div, float this right. Then place your Left Sidebar code under this and float it left.
BTW. If Google is using your Left Sidebar text as a description in the SERPs, could it be that you are missing a META description? (or that your have duplicate descriptions). If you have good description text, the shuffling about of divs should not be necessary.
[edited by: marcel at 8:17 am (utc) on April 30, 2008]
Any way once you hit three columns and your content is not at the left most part of the page then you start having to mess with positioning unless I've missed something.
Any way below should be exactly what you're looking for. I also highly recommend using a meta description. I usually copy the longest description I can find and use that as my text 'limit' to avoid an ellipsis. Have fun!
- John
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS1 Liquid Layout Example</title>
<meta name="description" content="Search engines use this for your description!" />
<style type="text/css">
#content {
background-color: #f00;
/*float: center;*/
left: 10%;
position: absolute;
width: 80%;
}
#content div.padding {
background-color: #0f0;
margin: 8px;
}
#sidebar1 {
background-color: #00f;
left: 0%;
position: absolute;
width: 10%;
}
#sidebar1 div.padding {
background-color: #0ff;
margin: 1px;
}
#sidebar2 {
background-color: #0f5;
float: right;
width: 10%;
}
#sidebar2 div.padding {
background-color: #ff0;
margin: 1px;
}
body, html {
margin: 0px;
padding: 0px;
}
</style>
</head><body>
<div id="content">
<div class="padding">
Content
</div>
</div><div id="sidebar1">
<div class="padding">
Sidebar 1
</div>
</div><div id="sidebar2">
<div class="padding">
Sidebar 2
</div>
</div></body>
</html>
Note: I can't use meta descriptions on individual pages because I use Blogger software. Surprising, I know, since it's run by Google but if I can find a hack for it I'll let you know.
God Bless!
Lance
Wrap the Middle Content and Right Sidebar in a new div, float this right. Then place your Left Sidebar code under this and float it left.
That's the one! That way your content comes first (middle one).
In regards of IE bugs, just be sure you test it before you get it out. Check IE6 and IE7, and Firefox for sure. The rest is up to you. I find these three making 98% of my visitors. Safari around 1.5%, Opera 0.4%.
For IE, you may need to play with width and margins before you get it right.
BTW, I see IE8 is showing in logs too.
Left 120px ¦ Center 70% Width ¦ Right 200px
Left 120px ¦ Center 70% Width ¦ Right 200px
When maximized it looks fine but when minimized some the left sidebar gets knocked down. Any ideas?
Thanks!
Lance
- John
God bless,
Lance
- John
columns can be fixed or fluid, stability should be good! no dropping of floats
this layout has been tested, and is extendible, the columns can be in any order and in any position, you can also add more by readjusting the margins
<!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>Source Ordered Content - CSS Layout</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}#wrapper {
width: 960px; /* Width of layout - optional */
margin: 0 auto; /*Center container on page*/
}#contentwrap {
float: left;
width: 100%;
}#content{
margin: 0 180px; /*Margins for content column. to allow space for sidebars*/
zoom: 1; /* always add hasLayout to this div, use whichever method you prefer, but not width or height */
}#side1 {
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -100%; /* margin is equivalent to -(wrapper width) */
background: #dad;
}#side2 {
float: left;
width: 180px; /*Width of right column*/
margin-left: -180px; /* Same as -(right column width) */
background: #dad;
}/* use the pad classes to add padding to columns to make sure main column widths and margins always match */
#header, #footer{
float: left;
width: 100%;
background: #abc;
color: #000;
text-align: center;
}h1, p {margin: 0.5em 0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><div class="pad"><h1>Header</h1></div></div><div id="contentwrap">
<div id="content"><div class="pad"><p>Content Column</p></div></div>
</div><div id="side1"><div class="pad"><p>Left Column</p></div></div>
<div id="side2"><div class="pad"><p>Right Column</p></div></div><div id="footer"><div class="pad"><p>Footer Div Here</p></div></div>
</div>
</body>
</html>
-hth
[edited by: SuzyUK at 9:59 am (utc) on May 4, 2008]
