Any suggestions please?
Sorry for asking again, this is driving me crazy!
Thanks. 🙂
You must have some </div> tags out of closing order, and that’s throwing the display, even if it validates. Compare your theme edits with a fresh copy of your theme files and see what tags are different.
Thanks for the response. Should I only check in the CSS file?
If you edited the css file, check that. Also check index.php or other php theme files you edited.
I mainly fiddled with the css file from all the searches I made about it. Anything that I tried in other files, I put back the way it was after it didn’t work!
Thanks again. 🙂
Hi Sashira, could you post up your style.css and your div layout:
ie.
<div id="main">
<div id="sidebar1"></div>
etc
I’m sure we can help you with the layout,
One tip for you, so you can actually see the div boxes.
You will need to be using Mozilla Firefox as a browser, install this add-on, and use the ‘Outline’ – ‘Outline current elements’ function:
I went ahead and completely reinstalled the theme. I figured it was good to start from scratch again. 🙂
Does anyone have any suggestions? Is it possible that the way the author designed the theme that it wasn’t made to separate the sidebars from each other?
Carolineh, I am on Firefox, and the add-on you linked to goes to a page not found. What is the name of the add-on?
I’m willing to do whatever I can. 🙂
Add on name: Web Developer Toolbar.
The add-on developer’s site is: http://chrispederick.com/work/web-developer/
Okay success in getting it installed. 🙂
Here is a snippet of the CSS that I think is the most important. If you need an additional part, please let me know.
Please note, this is a freshly installed theme, so now everything is correct, but I still do not know how to get the content to appear between the 2 sidebars.
/* Content */
#content {
float: left;
width: 470px;
padding:10px;
}
/* Column Two */
#sidebar1 {
float: left;
width: 175px;
padding: 10px;
font-size:0.9em;
margin:5px;
}
/* Column Three */
#sidebar2 {
float: left;
width: 170px;
padding: 5px;
font-size:0.9em;
margin:5px;
}
#main .sidecol
{
border-left:#ccc 1px dotted;
}
#main .sidecol ul
{
margin:0;
padding:0;
}
#main .sidecol li
{
margin:0;
padding:0;
list-style:none;
background:none;
margin-bottom:2em;
}
#main .sidecol h2
{
padding: 0 0 5px;
font-variant:small-caps;
font-size:1.25em;
}
#main .sidecol p, #main .sidecol form
{
padding:10px;
margin:0;
}
#main .sidecol ul ul
{
margin:10px 0 0 20px;
padding:0;
}
#main .sidecol ul ul ul
{
margin:0px 0 0 10px;
padding:0;
}
#main .sidecol li li
{
list-style-image:url(img/bullet.jpg);
margin:0.5em 0;
padding:0;
And as for the <Div> I’m not quite sure what you are asking for, sorry if you could tell me which file it is in, I’ll happy copy it here.
Hey Sashira,
‘Div’s are like boxes that contain the information, and styles can be applied to these boxes to position them relative to each other. I’ve looked at your layout and it is basically this:
<div id="main">
<div id="content"></div>
<div id="sidebar1"></div>
<div id="sidebar2"></div>
</div>
and normally if they are all floated left they will appear in their normal order, but your’s dont :s not sure why but post up everything in your style.css that has the following:
#content
#sidebar1
#sidebar2
and it should start making sense 🙂
