Large Gap

[PlanetStyles.net]

Thanks Jade - what a mess! Looks like you have different bits and pieces of varying sidebar code scattered around

So the problem is caused by a HTML structure that can't achieve what you need it to, with elements forced into position with big negative CSS margins. It's also weird that all of your CSS lives in stylesheet.css , usually it lives in separate stylsheets and is simply 'called' by stylesheet.css . That's less important though, we can live without fixing that.

So first thing I'd recommend is backing everything up. We're doing open heart surgery here, something could go wrong.

Let's start with some clean up work. First we're going to remove the current sidebars and some of the old sidebar code it looks like you implemented in the past.

In overall_header.html, find and delete:

Code: Select all

<!-- DEFINE $SIDEBARS = 'off' --> <!-- Options: left | right | both | off -->
<!-- DEFINE $SIDEBAR_ON_PAGES = 'index' --> <!-- Options: global | index -->

Find and delete:

Code: Select all

<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index') -->
    <!-- IF $SIDEBARS != 'off' -->
        <div class="sidebarwrapper">
    <!-- ENDIF -->
    <!-- IF $SIDEBARS == 'left' -->
        <div class="fixedfluid-sidebar">
            <!-- INCLUDE sidebar_left.html -->
        </div>
            <div class="fixedfluid-content">
    <!-- ELSEIF $SIDEBARS == 'right' -->
        <div class="fluidfixed-sidebar">
            <!-- INCLUDE sidebar_right.html -->
        </div>
       
        <div class="fluidfixed-content">
    <!-- ELSEIF $SIDEBARS == 'both' -->
        <div class="fixedfluidfixed-left">
            <!-- INCLUDE sidebar_left.html -->
        </div>
        <div class="fixedfluidfixed-content">
    <!-- ENDIF -->
<!-- ENDIF -->

In overall_footer.html, find and delete:

Code: Select all

<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index')-->
    <!-- IF $SIDEBARS == 'left' or $SIDEBARS == 'right' -->
        </div><!-- /.fixedfluidcontent -->
        </div><!-- /.sidebarwrapper -->
    <!-- ELSEIF $SIDEBARS == 'both' -->
        </div>
        <div class="fixedfluidfixed-right">
            <!-- INCLUDE sidebar_right.html -->
        </div>
        </div>
    <!-- ENDIF -->
<!-- ENDIF -->

In index_body.html, find and delete:

Code: Select all

<div id="sidebar">
<!-- INCLUDE sidebar.html -->
</div>
<div id="sidebarleft">
<!-- INCLUDE sidebarleft.html -->
</div>
<div id="clear-both"></div>

In stylesheet.css, find and delete:

Code: Select all

#sidebar {
   width: 18.5%; /* choose width of sidebar here */
   float: right;
}

#sidebarleft {
   width: 18.5%; /* choose width of sidebar here */
   float: left;

}

Find and delete:

Code: Select all

/* Sidebars */
.sidebarwrapper {
    position: inherit;
}

/* left sidebar, right section */
.fixedfluid-content {
    padding: 0px 432px 0px 432px;
}

/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
    float: left;
    margin-left: -8px;
    margin-top: 30px;
    width: 235px;
    margin-bottom: -1185px;
    padding: 0;
}

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 370px;
}

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    float: right;
    margin-right: -20px;
    margin-top: -2100px;
    width: 240px;
    bottom:  0px;
    padding: 0px;
}

/* Both sidebars, middle section */
.fixedfluidfixed-content {
     padding: 0px 300px 0px 300px;
}

/* Sidebar Styling */

.ad1, .ad2 {
    display: block;
    float: right;
}

.ad1 {
    margin: 0 10px 10px 0; 
}

.fixedfluid-sidebar ul.sidebar li, .fluidfixed-sidebar ul.sidebar li, .fixedfluidfixed-left ul.sidebar li, .fixedfluidfixed-right ul.sidebar li {
    padding: 5px 10px; 
}

Woohoo! Now we've removed all old sidebar stuff. Now we just need to fix up the forumlist so it returns to its normal position.

In stylesheet.css, find:

Code: Select all

#forumlist {
   width: 62%;
   overflow: hidden;
   margin: auto;
margin-top: -1645px;

}

Replace with:

Code: Select all

#forumlist {
   overflow: hidden;
   margin: auto;
}

Yay! The forum should be looking normal again (but without any sidebars). Don't worry, the sidebar contents are still safe.

Now let's add the sidebars back in with some shiny new code.


In index_body.html, find:

Code: Select all

	<div id="forumlist">
<!-- INCLUDE forumlist_body.html -->
</div>

Replace with:

Code: Select all

<div id="maincontainer">



<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><!-- INCLUDE forumlist_body.html --></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><!-- INCLUDE sidebarleft.html --></div>
</div>

<div id="rightcolumn">
<div class="innertube"><!-- INCLUDE sidebar.html --></div>
</div>

<div id="footer"></div>

</div>

At the bottom of stylesheet.css, add:

Code: Select all

body{
	margin:0;
	padding:0;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 18.5% 0 18.5%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 18.5%; /*Width of left column in percentage*/
margin-left: -100%;

}

#rightcolumn{
float: left;
width: 18.5%; /*Width of right column in pixels*/
margin-left: -18.5%; /*Set margin to that of -(RightColumnWidth)*/

}



#contentcolumn .innertube{
margin: 0 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

/* ####### responsive layout CSS ####### */

@media (max-width: 840px){ /* 1st level responsive layout break point- drop right column down*/
	
	#rightcolumn{
	float: none;
	width: 100%;
	margin-left: 0;
	clear: both;
	}
	
	#contentcolumn{
	margin-right: 0;
	}
}

@media (max-width: 600px){ /* 2nd level responsive layout break point- drop left column down */
	#leftcolumn{
	float: none;
	width: 100%;
	clear: both;
	margin-left: 0;
	}
	
	#contentcolumn{
	margin-left: 0;
	}
}

#footer{
clear: left;
width: 100%;
}

Assuming this is all done correctly, your forum should look like this. All neat and tidy. YAY!

Let me know how it goes

(Note, this is my test forum. Yours will still contain all of your categories and forums)

yourdomain.com • Index page.png

[Jade23]

It was definitely a mess and it was all my fault lol. I'm such a newbie with code, not going to lie!

Everything went smoothly and painlessly and I have you to thank!!!! Thank you so, SO much!!!!!! The code worked and everything is showing up flawlessly! Thank you, thank you, thank you!!!!!!!!

[PlanetStyles.net]

Yay! Your forum looks 100% better. Glad it all went smoothly!