Hello -

It's been a while since I've visited, but I'm getting active in web development again and have once more turned to Atahualpa to design a custom site for a client.

The client wants the layout to have a fixed width and height. Setting the width is easy, but the height is turning out to be a problem.

In ATO > Center Column > Style and Edit CENTER COLUMN - I have tried various options for setting the height to a fixed value. Currently I am using the following code:

min-height: 618px;
max-height: 618px !important;
height: 618px !important;
overflow: auto;

The min-height is working, as it does not let the layout "collapse" down to a shorter value. However, the max-height does not work, nor does the height value; when there is content that is longer, the DIV grows automatically to accommodate it. This is common on many sites, but my client wants to have scroll-bars appear within the fixed boundaries, so that the page appears "stable" - sort of like a book.

I have found that if I hard-code a DIV on a page, that is set up to contain the page content, that this code works. However, I can't see a way to do this for lists of posts by category, since I'm not creating the content manually, it's being prepared on the fly.

I don't understand why the hard-coding of the CSS for a DIV element works OK, but it does not work OK when the DIV is created by the theme and contains dynamic content.

Is there a way to do this in Atahualpa, either by CSS or any other method? I am reluctant to go into the PHP files since I don't want to have to maintain the code changes for the client as the theme is updated, but if this is the only way to do this I may consider it.

Eric Bobrow

I would try setting a height to .post and/or .page with auto overflow.

I discovered after a LOT of experiments and research that Table elements (including TD elements such as the CENTER COLUMN) do not respond to height commands because they implicitly are given a display:inline attribute.

By adding a display:block attribute in the CSS inserts, I am now able to control the height of the center section as expected.

Here is the code I am using:

padding: 53px 15px 35px 26px;
background-color: #ffffff;
display: block;
height: 618px !important;
width: 474px;
overflow: auto;

Note that since the display attribute is changed to block, that it is necessary to explicitly declare the width as well as the height, since it no longer will pick up the sizes from other elements or the table width declaration.

I have two problems remaining. The main one is that the bottom of the Center section TD does not have a margin or padding; the padding declaration is effective on the content rather than the container, so that when one scrolls to the bottom of the content there is padding at the very end, but there's no clear space visually at the bottom of the column.

I tried to add a margin-bottom, which would work in that it keeps the clear space off the bottom. However, since I have the entire fixed size layout with a white background and the browser area outside the layout with a grey background, this reveals more of the grey so it doesn't look like a margin, it looks like the Center column container has gotten shorter than the neighboring sidebars.

Another annoyance is that the scrollbar showed up all the way at the right edge, which looked a little odd given that the client wanted the text in the box to be inset quite a bit. I put in an empty right-hand sidebar just to create some clear space, however I'm not sure that looks right either, since the overflow scrollbar goes from top to bottom with no margin, just like the contents.

QUESTION:
Is there any way to add in an extra white space at the top and bottom of the center column to create these visual margins when the contents overflows and the scrollbar is triggered? This would solve the aesthetic problem. I suppose I could do this by hacking the theme PHP file but would prefer to do this in ATO or CSS.

CONCLUSION:
I am happy to have resolved the big mystery (why the height declaration was being ignored); now it's mainly a question of what sort of aesthetics will be acceptable to my client given the limitations of CSS controls for table cells. I'm still looking for a way to make it look as beautiful as his original mockup (which was done in HTML rather than WordPress.

If anyone has any suggestions, please let me know. You can view the work in progress at:
http://dbaarchitectsinc.com/new/

Eric

OK, I got it figured out. The way to achieve what I wanted (after I was able to lock down the height of the Center Column TD element by changing it to display: block) was to put a background image behind the table.

Earlier, I had created two left-hand sidebars (one for the main navigation, the inner one for sub-navigation and some other content) with white background and grey borders on the right-hand side, along with a white-background Center Column (main post/page area). This created a clean look for the fixed size layout against the grey background.

I changed all of this to be transparent, and placed a background image matching the original layout (two sidebar white boxes and a main content area in white, separated by grey strips in between). It looked exactly the same. THEN... I adjusted margins and heights and was able to pull in my main content area, so that the scroll bars naturally worked with the contents, leaving nice white margins even when the content overflowed and there were scroll bars. Hooray!

I have spent way more time on this than it deserved, however I learned one very obscure thing (the trick with making a TD element display:block in order to fix its height) and also I now really understand how one can use background images to make a fixed layout work more simply.

Eric

One more comment, for the record - that others may find useful.

Here is a link to the page that gave me the obscure but vitally important information about why tables and table cells do not accept CSS height values unless one changes their display property:

http://stackoverflow.com/questions/4...ll-bar-appears

Here is an excerpt with the relevant information:

Apparently <table> elements don't respect the overflow property. This appears to be because <table> elements are not rendered as display: block by default (they actually have their own display type). You can force the overflow property to work by setting the <table> element to be a block type:

table {
display: block;
height: 500px;
overflow-y: scroll;
}

Note that this will cause the element to have 100% width, so if you don't want it to take up the entire horizontal width of the page, you need to specify an explicit width for the element as well.