Large Gap

[Jade23]

http://imgur.com/RqXmxYN

Every time I add information to my sidebars, this huge gap between my forum and the top of the page body appears. I've tried to go into the commons.css > #forumlist ... to fix this but it's not working. Either I must not be looking in the right place or I've got to take some code out of somewhere to fix it but I'm not exactly sure where. I have no clue where I need to look to get this gap to go away. Could someone help me with this?

Website: http://standingtrials.com/index.php

[Elias]

In common.css what is your page-body margin set to?

Code: Select all

#page-body {
	margin: 4px 0;
	clear: both;
}

[Jade23]

It's set to what you posted.

Code: Select all

#page-body {
    margin: 4px 0;
    clear: both;

[pit-PL]

Try adding overflow: hidden; to #forumlist instead of using negative margin for #sidebar and #sidebarleft.

[Jade23]

Alrighty, so I added that edit and took out the negative margins. The sidebars stay at the top but now the forum list is below the sidebars. Please take a look at the site.

http://standingtrials.com/index.php

I've tried to adjust the forumlist with negative margins again but no luck. The width of the sidebars and the forum list isn't the problem either. Not sure where all that space is coming from.

----Edit-----

Solved. Thank you for all your help.

[Elias]

What was the solution?

[Arty]

Best solution is to change structure. Wrap content in additional div and move it before sidebars then wrap it all in one additional div, so code would look like this:

Code: Select all

<div id="main-content">
    <div id="content-wrapper"> 
        <div id="content">content here </div>
    </div>
    <div id="sidebar-left"> left code </div>
    <div id="sidebar-right"> right code </div>
</div>

then add style like this:

Code: Select all

#main-content:before, #main-content:after { content: ''; display: table; clear: both; }
#sidebar-left { width: 236px; float: left; }
#sidebar-right { width: 236px; float: right; }
#content-wrapper { width: 100%; float: left; margin: 0 -236px; }
#content { padding: 0 246px; }
@media (max-width: 800px) {
    #content-wrapper { margin-right: 0; }
    #content { padding-right: 0; }
    #sidebar-right { float: none; margin: 0 auto; }
}
@media (max-width: 600px) {
   #content-wrapper { margin-left: 0; }
   #content { padding-left: 0; }
   #sidebar-left { float: none; margin: 0 auto; }
}

[Jade23]

Hey Arty,

Where exactly would I add this code into? For the style, I'm guessing it's common.css but what about the code above it?

[Jade23]

I'd like to bump this for answers. I'm still having issues with this gap. It shows up in different heights from the header on different devices (iphone, ipad, computer, laptop).

---Edit----

I'm not sure how to code this suggestion into my forum and am nervous about fiddling with the code to make it work. Where do I copy/paste this to and what files do I need to edit?

[PlanetStyles.net]

Hi Jade,

Interesting layout for sure. So that I can help you with this, I don't suppose you could let me know whether you coded the sidebars yourself or are you using a MOD?

I'd be happy to take a closer look if you're comfortable sending me a copy of your style files through private message

[Jade23]

Hi there!

This is what I used ---> https://www.phpbb.com/support/docs/en/3 ... silver-se/

I'd be glad to provide you with my styles info if you can help me get rid of this funky gap! Just let me know what you need.

[PlanetStyles.net]

Thanks Jade!

It may be a little tricky, but definitely not impossible to fix

Here's what I need you to do:

1) Browse to your forum installation
2) Browse to the madevo theme
3) .zip it up and download it
4) Attach it in a PM to me (or feel free to post here if you're comfortable with that)

I'll be a while digging around and seeing where the problem is, maybe an hour or two

C

[Jade23]

Thanks much! I just downloaded it and will attach in PM now!

[PlanetStyles.net]

Thanks Jade, are you able to ping over the template and image files too?

My fault, I should have made this clearer. Thanks!

[Jade23]

Sure, sorry! Downloading and attaching to PM now.