Split Sidebar Into Two Columns
Permalink Browser Info Environment
I am trying to split the sidebar into two columns, but I can't get them to show side-by-side. I have created the two areas, but the new area always shows up above the area that is part of the original template design.
Here are the modifications I have made to the code:
iGotStyle.css
#mainShell #Adsidebar { background: #f7f7f7 url(../img/bgMainShellSection.jpg) repeat-x; float: left; width: 100px; min-height: 280px; margin-left: 10px; padding: 10px; position: relative; }
#mainShell #sidebar { background: #f7f7f7 url(../img/bgMainShellSection.jpg) repeat-x; float: right; width: 130px; min-height: 280px; margin-left: 10px; padding: 10px; position: relative; }
sidebar.php
<?php $a = new Area('AdSidebar'); $a->display($c); ?>
<?php $a = new Area('Sidebar'); $a->display($c); ?>
Attached is a picture of what I end up with, and both areas end up where the left or right float is specified on the #sidebar line and no matter what I do to the #Adsidebar line, nothing changes.
I know it's got to be something simple that I'm missing. Thanks for any help.
Here are the modifications I have made to the code:
iGotStyle.css
#mainShell #Adsidebar { background: #f7f7f7 url(../img/bgMainShellSection.jpg) repeat-x; float: left; width: 100px; min-height: 280px; margin-left: 10px; padding: 10px; position: relative; }
#mainShell #sidebar { background: #f7f7f7 url(../img/bgMainShellSection.jpg) repeat-x; float: right; width: 130px; min-height: 280px; margin-left: 10px; padding: 10px; position: relative; }
sidebar.php
<?php $a = new Area('AdSidebar'); $a->display($c); ?>
<?php $a = new Area('Sidebar'); $a->display($c); ?>
Attached is a picture of what I end up with, and both areas end up where the left or right float is specified on the #sidebar line and no matter what I do to the #Adsidebar line, nothing changes.
I know it's got to be something simple that I'm missing. Thanks for any help.
| Type: | Discussion |
|---|---|
| Status: | New |
iGotStyle.css
Change the line that starts with #mainShell#sidebar... to:
#mainShell #lsidebar {
background: #f7f7f7 url(../img/bgMainShellSection.jpg) repeat-x;
float: left;
width: 160px;
min-height: 280px;
margin-left: 10px;
padding: 2px;
position: relative;
}
#mainShell #rsidebar {
background: #f7f7f7 url(../img/bgMainShellSection.jpg) repeat-x;
float: right;
width: 130px;
min-height: 280px;
margin-left: 0px;
padding: 2px;
position: relative;
}
sidebar.php:
Change the line that initiates the sidebar editable area to:
<div id="lsidebar">
<?php
$a = new Area('AdSidebar');
$a->display($c);
?>
</div>
<div id="rsidebar">
<?php
$a = new Area('Sidebar');
$a->display($c);
?>
</div>
And that will turn the one area in the sidebar into two areas in the sidebar that are next to each other.