---------- Forwarded message ----------
From: Wesley Acheson <[email protected]>
Date: Tue, Aug 17, 2010 at 9:56 PM
Subject: Sigh three column layout.
To: [email protected]
Hi I've been trying to do a three column layout with the following
constraints one content column and two "sidebar" columns with the following
constraints.
1. Changing a selector(s) on one of the ancestors of the columns should
switch the primary and sidebar positions.
2. Any content that appears underneath appears underneath.
I've tried this by making the parent of the columns position relative and
then using absolute positioning for the two sidebars. This works but it has
a major problem. If the content of the "sidebars" is longer than the main
content then whatever is below appears over the sidebars. (Which Is what I
would expect with absolute positioning).
My attempt before this was with using floats. Again this almost works but
say my source code order is; content, primary sidebar, secondary sidebar and
I want the sidebars to appear alongside the content. I can't float the
content left as it will be left most.
It does work for sidebar, sidebar, content or content, sidebar sidebar.
Does anyone have any suggestions?
My current code for the intrested.
/***************************
* SIDEBARS
**************************/
#content-wrapper {
position:relative;
}
#primary-sidebar,
#secondary-sidebar {
width:20%;
background:green;
}
#main {
position:relative
}
#primary-sidebar,
#secondary-sidebar{
position:absolute;
top:0;
}
/** Only showing one left sidebar **/
#main-wrapper.left-1 #main{
margin-left:20%
}
#main-wrapper.left-1 #primary-sidebar
{
position:absolute;
left:0;
}
#main-wrapper.left-1 #secondary-sidebar
{
display:none;
}
/* One right sidebar */
#main-wrapper.right-1 #main {
margin-left:20%;
}
#main-wrapper.right-1 #primary-sidebar
{
position:absolute;
right:0;
}
#main-wrapper.right-1 #secondary-sidebar
{
display:none;
}
/* Two left sidebars */
#main-wrapper.left-2 #main{
margin-left:40%;
}
#main-wrapper.left-2 #primary-sidebar{
left:0;
}
#main-wrapper.left-2 #secondary-sidebar
{
left:20%;
}
/* two right sidebars */
#main-wrapper.right-2 #main{
margin-right:40%;
}
#main-wrapper.right-2 #primary-sidebar
{
right:20%
}
#main-wrapper.right-2 #secondary-sidebar
{
right:0;
}
/* Showing one sidebar on each side */
#main-wrapper.left-1.right-1 #main {
margin-left:20%;
margin-right:20%;
}
#main-wrapper.left-1.right-1 #primary-sidebar
{
left:0;
right:auto;
display:block;
}
#main-wrapper.left-1.right-1 #secondary-sidebar
{
right:0;
left:auto;
display:block;
}
The markup structurally is like this.
<div id="main-wrapper" class="left-1 right-1">
<div id="content-wrapper">
<div id="main">
<div class="entry">
content goes here
</div>
<div id="primary-sidebar">
<ul>
<li>P Item</li>
<li>P Item</li>
<li>P Item</li>
<li>P Item</li>
<li>P Item</li>
<li>P Item</li>
<li>P Item</li>
</ul>
</div>
<div id="secondary-sidebar">
<ul>
<li>S Item</li>
<li>S Item</li>
<li>S Item</li>
<li>S Item</li>
<li>S Item</li>
<li>S Item</li>
<li>S Item</li>
</ul>
</div>
</div>
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
