By GreenSpiderDesign on

I'm developing a site that has a 225px sidebar left, a 550px middle column, and a 225px sidebar right. At the top of the center column I have a Frontpage Slideshow block that is static and below it I have a view block that is set to display five items of a particular content type with a pager below. Everything looks beautiful until you change the pager to a view that doesn't have five items. At that point the left and right columns are shifted up by the amount of missing space that exists when there are a full five items in the view block.

I have had to set the top margins to the top blocks in each of the left and right columns to -1500 in order to bring them up to the top of the page when it contains the full five items, and I'm certain that this is what is causing the problem when the view isn't full. I just don't know what else to do. I've tried creating a fixed page height on .front - that didn't help.

My thinking is that there is something missing in my CSS file (pasted below - subsequently removed to make thread shorter) that is causing this.

Any suggestions would be greatly appreciated!

⋅ Categories: Drupal 6.x

Comments

Chris Einkauf’s picture

Chris Einkauf commented

Is your site live?

If so, I think it'd be a lot easier for someone to take a look at your site using Firefox's Firebug add-on than analyzing a long list of css codes. If your site is live, paste the URL here. If it's not, download Firebug for Firefox and use that to diagnose your css problem (i.e. play around with the css elements, which you can edit on-the-fly).

GreenSpiderDesign’s picture

GreenSpiderDesign commented

Here is the url - obviously still a work in progress. And I just activated the Jquery_ui module and as soon as I hit save to update the modules page the entire site has crashed. :*(

Now I have a new issue - if anyone has had similar issues with Jquery_ui crashing a site (perhpas the timing was coincidental) please let me know!

http://www.waydgo.quepal.com

GreenSpiderDesign’s picture

GreenSpiderDesign commented

I've been working on this all day and cannot find an answer to my question...

When the # of results in a views block located in the "bottom-content" region of the form changes to anything less than a full # - such that the pager is visible - the left and right sidebars move up to the point that they are going off the top of the page.

I cannot for the life of me figure this one out. Any suggestions? URL of the site is above.

Thanks!

GreenSpiderDesign’s picture

GreenSpiderDesign commented

what is causing this issue - it lies in the fact that when there is a full page of results and the pager IS displaying I have had to set the top margin for the top blocks of both the right and left sidebars to -1710px in order to make the blocks display where I want them on the page. When the result set is anything less than a full page of results the -1710px is causing the left & right top blocks to get shoved up off the page.

But how can I do this differently? I must have some setting erroneously set that is causing me to do the -1710px setting in the first place and if I can fix that the issue will be resolved.

I have a few hairs left and hope someone can help me before I lose these and what's left of my mind!

I'm even willing to pay for your time if someone can give me a solution!

Thanks,
Terry

mcfilms’s picture

mcfilms commented

You might not be getting much response because the url you provided does not work. I know you are aware of Firebug. Maybe try vertical-align:top in those two divs?

A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com

GreenSpiderDesign’s picture

GreenSpiderDesign commented

mcfilms - thanks for the heads up on the url - shouldn't have included the www - http://waydgo.quepal.com

I changed to margin-top: -1710 to vertical-align: top; and it worked for the home page - so at least I don't have to have that ridiculous setting, but for some reason as soon as I filter the bottom view to a result set with less than a full page it still pushes the left & right columns up.

Is there some fixed setting I can use? I don't know why vertical-align: top isn't working when the view is filtered.

Any other ideas? Bueller? Anyone? :D

Hueij’s picture

Hueij commented

Your #main-inner is 1000px wide. In there you have 3 left-floated divs with a total width of 1045 px. Get rid of the padding on #content and put them on #content-inner. That is what those inner divs are for. After that you still have a total width of 1005px, so you have to get rid of those 5 px in one of those three divs.

www.opstijgendenevel.nl

Chris Einkauf’s picture

Chris Einkauf commented

It looks like this design is lacking a coherent structure. For example, you have the middle column, followed by the left and right sidebars.

As a starting point, the structure of your page should be like this...

main (set the width of your entire page basically... maybe give it a width of 1068 or something)
-header (don't have to do anything with the width, but you can play around with margins or padding if you want)
-content (again, don't have to do anything with width.. it'll inherit the width of "main")
--sidebar-left (give it a width of 25%)
--middle-column (width of 50%)
--sidebar-right (width of 25%)

This structure alone won't solve all your problems. You'll still have to adjust your margins, paddings, floats, etc. (you won't need float:left if you use a structure like the one above).

Pretty much, just conceptualize your web page as a table, with rows and columns within rows and then rows within those columns, and so on and so on. Use percentages for the widths, which will make it easier because it'll be harder for inner-elements A1 and A2 and A3 to combine to be a greater width than their parent A.

All of this might sound confusing, and if it does, my best advice to you is to use Firebug to see how other sites arranged their div's.