I was able to solve the 'display' problem. I changed the stylesheets for the layouts and everything works as expected. The display was perfect in IE 7 and FireFox 3.0.1. This should fix a lot, if not all, display problems. No database changes are needed for this this to happen.
These style files are under the folder '~\controls\content\styles' of the web version I downloaded a couple of days of back.
You should overwrite the following style sheets with the styles I have mentioned below ( make sure you 'completely' overwrite the original styles, otherwise you will have problems in display). There are subtle changes in these styles, which you can see on closer inspection.
Also, what I found important here is that the layouts being used are 'fixed layouts' where the total width including right/left margins should be 770 px. This means that you can adjust the right, left and main columns to any convenient widths proivided the above rule is followed.
Also, when the layout says 'Main Right' it means there is a right column and a main column, so that the main column is leftmost column. When layout is 'Main Left' it means that there is a left column and a main column, so that the main column is rightmost column. These layouts apply to the area that is to the right of 'Category Navigation Bar' on left and below the 'Main Menu'. I hope I could paste the images of the resulting layouts, but I could not find a way to do this on this forum.
If you enable the border CSS, that are commented in styles below, then that works also according to the tests I did
The sorting of regions within a page happens for each column. For example, left column regions will be sorted so that a lowest sort order value region will be the topmost region in left column and highest sort order value will be the bottom most region of left column.
3col.css
#LeftContent {
margin:0px;
width: 230px;
float: left;
padding-top: 10px;
text-align:center;
}
#MainContent{
margin-left: 235px;
margin-right: 165px;
padding-top: 10px;
width: 375px; /*550px;*/
}
#RightContent {
margin-right:0px;
width: 160px;
float: right;
padding-top: 10px;
text-align:center;
}
2ColMainLeft.css
#MainContent {
float: right;
width: 610px;
/*border: 1px solid red;*/
}
#LeftContent {
margin:0;
text-align: center;
width: 160px;
float: left;
/*border: 1px solid green;*/
}
2ColMainRight.css
#MainContent {
margin: 0;
float: left;
width: 610px;
/*border: 1px solid red;*/
}
#RightContent {
text-align: center;
width: 160px;
float: right;
/*border: 1px solid green;*/
}