What is source ordering?

I’ve run into simular problems. As sottwell sais, I had to set a minimum height to make sure the menu fitted. Since minimum heights are a problem for a lot of browsers I used a 1px wide floating block.

My Modx site don’t have enough item to show the problem so I create the template in Mambo at my site call "3cols" to test out the situation.

Here is the link to my site: http://ongetc.com and select "3cols" in the "template chooser" then click on "Open All" under the "Main Menu"

Susan,
The only section that have the height define are the header, and footer. The body, left and right colume do not have the height define. Would the header and footer height casue this problem?

Theo,
If you put in the mininum height to be long enough for the long menu which I don’t know because it is growing as the content being added then there would be too much blank space on the bottom.

Thanks in advance!

I think you have an error in your site’s url. That link just brings up one of those domain-name squatting link sites.

Susan,

I am sorry! I mistyped it! It should be http://ongetc.com

Thanks

Just a quick observation. The left column is absolutely positioned which means it is taken out of the normal flow of the document - it’s isolated from the rest of the page. In this case the menu fits when closed because the main content area is long enough to give it room. When the menu is extended the left column stretches and overshoots the space it had. Since it is absolutely positioned it just overlays the footer and pushes the edge of the window downwards.

To get around this you could make the left column a floated element instead. Then you can use clear:both on the footer. (The reason it doesn’t work for you at the present is that the column is not floated but absolutely positioned)

Hope this helps.

I make the following changes:
. left nav: position: relative and float: left
. right nav: position: relative and float: right

It works!

Thanks everyone

Well! The body and the right column do not grow with the left eventhough the footer got push down.

Is there any more suggestion on this?

Thanks

You’ll need to use Faux Columns ( http://www.alistapart.com/articles/fauxcolumns/ or http://www.communitymx.com/content/article.cfm?cid=AFC58 among others ) or JS to set the height of each column to the max of the three via some minor DOM math.

Hope this helps!

I think you should take a look on your structure. Now it looks like this:



The problem is that the footer is outside cbody. The clear:both only clears the footer from navAlpha, but it doesn’t do anything for the rest of the content with the present structure. And thus the border around cbody ends in the middle of the page.
Try moving navAlpha and navBeta outside cbody. Or move footer inside cbody.

Then there is the problem with having all three columns extend to the bottom of the page. Look here for inspiration.

Oh, you guys are good!

That did it! It works!

Thanks