8 replies [Last post]
Anastasios
Offline
newbie
Raleigh, NC
Last seen: 16 years 10 weeks ago
Raleigh, NC
Timezone: GMT-6
Joined: 2005-11-17
Posts: 4
Points: 0

Dear Community Members,

I have been working at a design I am using for my website which I hope to make live soon. I have had an incredible amount of difficulty with getting a proper 3-column layout and have read up on several of the different 3-column layout suggestions. I have come away confused, because there were always little bugs, such as on the front page (http://www.orthodoxchristianity.net/mambo) the 3 column layout looked fine, but by clicking on one of the menu items where the middle column became longer, the right column was eaten up so to speak and forced into the middle column.

I tried fiddling with negative margins and the like and each time things got more messed up. I finally succeeded in coding the 3 columns as I want them to appear with one annoying exception: the middle column will not go down 10px from the top like the other two columns do. I tried adding a margin-top: 10px; and I also tried just top: 10px;. I added in some negative margins to see what would happen: nothing. So my question is: how can I either get this middle column down 10px or should I scrap my 3 column layout principles employed thus far and start over again with some other model (and which one would you suggest?)

Here is my index file:

<?php
/**
* ocnet - Mambo 4.5.2 template
* @version 4.5.2
* @copyright (C) 2005 by Anastasios Hudson and OCnet Administrators
* @license licensce info here
*/
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
  <head>
    <?php if ( $my->id ) initEditor(); ?>
    <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
    <?php mosShowHead(); ?>
<?php echo "<meta name=\"author\" content=\"www.mambosolutions.com\" />" ?>
   <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?>
   <?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
  </head>


<body>

<div id="supercontainer">
<div id="container">
	<div id="top-section">
  		<div id="top-row-1">
                                         <div id="path">
                                         <?php mosPathWay(); ?>
                                         </div>


                                         <div id="datebartext">
                                         <?php print(Date("l"));
	                          ?>,
                                          <?php
	                          /*Prints something like: Feb-02-2005
	                         ("H")-7, is offset for time difference from sever and  parish, parish is 7 hours behind server. -7 should be replaced with correct number of hours for your site 
	                         date("d")-13 is the offset for Julian date*/
	                         echo date("F d", mktime(date("H")-0, 0, 0, date("m"),  date("d")-13,  date("Y")));
	                         ?>, 7514
	                          /
	                         <?php
	                         print(Date("F d, Y"));
	                         ?>
                                         </div>

                                          
                                </div>
		<div id="top-row-2">
		</div>
		<div id="top-row-3">
		</div>
  	</div>
  	<div id="mid-section">
  		<div id="mid-col-1">
		<?php mosLoadModules ( 'left' ); ?>
                                <br/>
                                <?php mosLoadModules ( 'user1' ); ?>  		                </div>

  		<div id="mid-col-2">
		<?php mosMainBody(); ?>
  		</div>

  		<div id="mid-col-3"><?php mosLoadModules ( 'right' ); ?>
                                <br/>
                                <?php mosLoadModules ( 'user2' ); ?>
                                </div>
                </div>
<div id="bottom-section">
© 2002-2005, The Administrators of OrthodoxChristianity.net.  All Rights Reserved. No content from this site may be reproduced without the written consent of the Administrators.
</div>
</div>






</body>
</html>

here is my css file:

/*-------------------LAYOUT-------------------*/
/* ie5 win start */
body
{ 
	font: small serif;
  	margin: 0px; 
	padding: 0px; 
	line-height: 14px;
	color: #000;
	font-size: x-small;
	voice-family: "\"}\""; 
	voice-family: inherit;
	font-size: small;
	text-align: center;
}
/* ie5 win end */



*
{
	margin: 0px;
	padding: 0px;
}

body
{ 
	position: relative;
	background-color: #e3eef6;
	background-image: url(http://www.orthodoxchristianity.net/mambo/templates/EcclesiaGOC/images/background.jpg);
	background-repeat: repeat-y;
	background-position: top center;
	text-align: center;
	margin:0px auto;
	padding: 0px;
}

#supercontainer
{
	position:relative;
	background-position: top center;
	width:900px;
	margin:0px auto;
}



#container
{
	position: relative;
	width: 831px;
	text-align: left;
	margin:0px auto;
                padding: 0px;

}

#top-section
{
	position:relative;
	left:0;
	top:0;
                width: 831px;
	margin:0px auto;
                padding: 0px;

}

#mid-section
{
	position:relative;
	left:0;
	top:0;
	width: 831px;
	height: auto;
	margin:0px auto;
	text-align: center;

}

#bottom-section
{
	position:absolute;
	left:0;
                bottom: 0px;
                width:831px;
	border-top: 1px dotted;
                margin-bottom: -450px;
margin-left: -155px;
                font-style: italic;
                text-align: center;
}


#top-row-1
{
	position:relative;
	width: 831px;
	height: 21px;
	background-image: url(http://www.orthodoxchristianity.net/mambo/templates/EcclesiaGOC/images/datebar.jpg);
	background-repeat:none;
	margin:0px auto;
                padding: 0px;
}


#top-row-2
{
	position:relative;
	width: 831px;
	height: 5px;
	line-height: 2px;
	margin:0px auto;
                padding: 0px;
}


#top-row-3
{
	position: relative;
	width: 829px;
	height: 126px;
	background-image: url(http://www.orthodoxchristianity.net/mambo/templates/EcclesiaGOC/images/logo.jpg);
	background-repeat: none;
	border: 1px solid;
	border-color: #b3b3b3;
	margin:0px auto;
                padding: 0px;
}


#mid-col-1
{
	position: absolute;
	top:10px;
	left:0px;
	width:125px;
	padding: 10px;
	background-color: white;
	border: 1px solid;
	border-color: #b3b3b3;
	text-align: left;
	margin:0px auto;

}

#mid-col-2
{
	width:500px;
 	padding: 10px;
	background-color: white;
	border: 1px solid;
	border-color: #b3b3b3;
	text-align: left;
             margin: 0px auto;
}


#mid-col-3
{
	position: absolute;
	top:10px;
             right: 0px;
	width:125px;
	padding: 10px;
	background-color: white;
	border: 1px solid;
	border-color: #b3b3b3;
	text-align: left;
	margin: 0px auto;

}


#path
{
	position: relative;
	float: left;
	top: 0px;
	left: 0px;
	height: auto;
	width: auto;
	background-image: none;
	text-align: left;
	margin:0px auto;
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;

}

#datebartext
{
	position: relative;
	top: 0;
	float: right;
	background-image: none;
	height: auto;
	width: auto;
	color: white;
	text-align: right;
	margin:0px auto;
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
}




td, tr, p, div
{
	font-family      : Verdana, Arial, Helvetica, sans-serif;
	font-size        : 11px;
	color            : #333333;
}

table.moduletable 
{
	font-size        : 12px;
	width            : 100%;
	margin-bottom    : 15px;
 
}

table.moduletable th
{
	font-family: Georgia;
	border-bottom-color: #3366C0;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	font-size: 13px;
	font-weight: bolder;
	color: #3c499d;
	text-align:left;
}

li
{
	line-height: 16px;
	margin-left: 0px;
	font-size: 12px;
	list-style-type: none;
}

.pathway
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ffffff;
}

a.pathway:link, a.pathway:visited {
	color            : #ffffff;
	font-weight      : normal;
}

a.pathway:hover
{
	color            : gray;
	font-weight      : normal;
} 

/* --Default Class Settings-- */

a.mainlevel:link, a.mainlevel:visited
{
	color: #3366C0;
	background-position: left;
	text-align: left;
	font-family: Trebuchet MS, sans-serif;
	font-size: 13px;
	list-style-position: inside;
	list-style-image: url(../images/bullet2.gif);
	margin-left: 5px;
}

a.mainlevel:hover
{
	color: gray;
	background-position: left;
	text-align: left;
}

a.mainmenu:link, a.mainmenu:visited
{
	color: #333333;
	font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
	font-weight: bolder;
}

a.mainmenu:hover
{
	color: gray; 
	text-decoration: none;
}

a.sublevel:hover 
{
	color: gray; 
	text-decoration: none;
}

a.sublevel:link, a.sublevel:visited 
{
	color: #333333;
	font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
	font-weight: normal;
}

.poll
{
	font-family      : Arial, Helvetica, sans-serif;
	font-size        : 10px;
	color            : #666666;
	line-height      : 14px;
}
*/
/*These three are the alternating white and gray tables such as in polls.*/
.sectiontableheader
{
	background-color : #CCCCCC;
  	color            : #7B8DA1;
  	font-weight      : bold;
}

.sectiontableentry1
{
	background-color : #F0F0F0;
}

.sectiontableentry2
{
	background-color : #E0E0E0;
}

/*The following is for the byline.*/
.small 
{
	font-family      : Verdana, Arial, Helvetica, sans-serif;
	font-size        : 10px;
	color            : #3366C0;
	text-decoration  : none;
	font-weight      : bolder;
}

.smalldark 
{
	font-family      : Verdana, Arial, Helvetica, sans-serif;
	font-size        : 10px;
	color            : #000000;
	text-decoration  : none;
	font-weight      : normal;
}

.contentpane
{
	background       : #FFFFFF;
}

.contentpaneopen
{
	width : 100%;
	padding-left : 5px;
	padding-right : 5px;
	border-spacing : 0px;
	margin-bottom : 25px;
	border-bottom: dotted;
	border-bottom-width: 1px;
	border-top-width: 1px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-top: none;
}

.contentheading, .componentheading
{
	font-family      : Georgia;
	font-size        : 13px;
	font-weight      : bold;
	color            : #3c499d;
	text-align       : left;
}

.createdate {
	font-family      : Arial, Helvetica, sans-serif;
	font-size        : 10px;
	color            : #999999;
	text-align       : left;
}

.modifydate
{
	font-family      : Arial, Helvetica, sans-serif;
	font-size        : 10px;
	font-style	   : italic;
	color            : #999999;
	text-align       : left;

}

.readon
{
	font-family      : Arial, Helvetica, sans-serif;
	font-size        : 9px;
	color            : purple;
	text-align       : left;
}


.button 
{
	font-family      : Verdana, Arial, Helvetica, sans-serif;
	font-style       : normal;
	font-size        : 10px;
	font-weight      : bold;
	background-color : #F0F0F0;
	color            : #000000;
	border           : 1px solid #CCCCCC;
}

.inputbox
{
	font-family      : Verdana, Arial, Helvetica, sans-serif;
	font-size        : 10px;
	color            : #000000;
	background-color : #F0F0F0;
	border           : 1px solid #CCCCCC;
}


a:link, a:visited
{
	font-size        : 11px;
	color            : #000000;
	text-decoration  : none;
	font-family      : Verdana, Arial, Helvetica, sans-serif;
}

a:hover
{
	color            : gray;
}

/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited
{
	font-family:	Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:		13px;
	font-weight:	bold;
	color:			#000000;
	text-align:		left;
}

a.contentpagetitle:hover
{
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-align:left;
    color: #7B8DA1;
    text-decoration: underline;
    font-weight: bold;
}

a.category:link, a.category:visited
{
	color            : #333333;
	font-weight      : bold;
}

a.category:hover
{
	color            : #7B8DA1;
}

/* Styles for dhtml tabbed-pages */
.ontab
{
	background-color: #ffae00;
	border-left: outset 2px #ff9900;
	border-right: outset 2px #808080;
	border-top: outset 2px #ff9900;
	border-bottom: solid 1px #d5d5d5;
	text-align: center;
	cursor: default;
	font-weight: bold;
	color: #FFFFFF;
}

.offtab
{
	background-color : #e5e5e5;
	border-left: outset 2px #E0E0E0;
	border-right: outset 2px #E0E0E0;
	border-top: outset 2px #E0E0E0;
	border-bottom: solid 1px #d5d5d5;
	text-align: center;
	cursor: default;
	font-weight: normal;
}
.tabpadding
{
}

.tabheading
{
	background-color: #ffae00;
	text-align: left;
}

.pagetext
{
	visibility: hidden;
	display: none;
	position: relative;
	top: 0;
}

/* for modifying {moscode} output.  Dont set the colour! */
.moscode
{
	background-color: #f0f0f0;
}

/* Text passed with mosmsg url parameter */
.message
{
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size : 10pt;
	color : #ff6600;
	text-align: center;
}
/* custom stuff */
.container
{
	border: solid;
	border-width: 1px;
	border-color: #efefef;
	background-color: White;
}
.boxes
{
	border: solid;
	border-color: #efefef;
	border-width: 1px;

}

/*STUFF I HAVE CUT OUT*/
/*table.moduletable td {
	border           : 2px solid #ffffff;
	font-weight      : normal;
	  list-style       : inside url(../images/bullet.gif) 2px;
	list-style-image : url(../images/bullet.gif);
}*/

/*hr 
{
  background       : #CCCCCC;
  height           : 1px;
  width            : 100%;
}*/

/*.title 
{
	font-family: sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #3c499d;
}*/

and here again is the site "in action":

www.orthodoxchristianity.net/mambo

Obviously, I am using the Mambo Content Management System.

Thanks for your help anyone!!

Sincerely,

Anastasios

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

3 column layout: middle column will not move down 10px

It's a collapsing margin; add back your 10px margin-top but also add overflow hidden to the #mid-section which will stop the margin collapse and will also contain that left menu column.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 5 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

3 column layout: middle column will not move down 10px

Change your #mid-col-2 margin-top to 10px. Then change #mid-col-1 and 3 top to 0px.

This is my big chance . . . yep, I blew it . . .

Anastasios
Offline
newbie
Raleigh, NC
Last seen: 16 years 10 weeks ago
Raleigh, NC
Timezone: GMT-6
Joined: 2005-11-17
Posts: 4
Points: 0

3 column layout: middle column will not move down 10px

Implementing Hugo's suggestion resulted in no change at all in IE 6.0 but in Firefox 1.5b2 it resulted in the middle column coming to the right height but being tucked under the first column (which is what can be seen now at http://www.orthodoxchristianity.net/mambo)

n8gz4ez's suggestion only made all the columns touch the top margin so I tested it and reverted back to Hugo's suggestion for the time being.

Can you think of anything else that might be wrong with my code that is affecting this layout? I really appreciate your help so far!

Thank you,

Anastasios

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 5 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

3 column layout: middle column will not move down 10px

Add { margin-left: 155px; } to #mid-col-2.

This is my big chance . . . yep, I blew it . . .

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

3 column layout: middle column will not move down 10px

Didn't do that when I tested it :? Did you change anything else?
as mid-column only has width and the left column is positioned absolute the mid column will slip underneath. Nate's suggestion should do the trick.


Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anastasios
Offline
newbie
Raleigh, NC
Last seen: 16 years 10 weeks ago
Raleigh, NC
Timezone: GMT-6
Joined: 2005-11-17
Posts: 4
Points: 0

3 column layout: middle column will not move down 10px

Quote:
Did you change anything else?

No, I didn't....hey thanks to both of you for your help so far. I really appreciate it. The subsequent suggestions didn't work either so I figured something must be awry in my basic layout. I went back in and changed all 3 columns to relative, added floats, and took out my midcolumn's php code so that it is not overflowing in order to show you what I would like it to look like. I also added a green border around my #mid-section so that it's obvious to anyone looking which content items are overflowing (there is a 1 pixel discrepancy between the green border and the logo I have on top but that is another issue I believe, and I am going to edit the logo anyway so I will take care of that later). I think this layout works a little better unless you think that this was a stupid change for me to make in which case I could always set it back to how it was before.

Basically what I have now is that the first column overflows slightly but does not affect the layout of the other two. The #mid-col-2 will eventually become the longest when I add back the content, and its overflow DOES impact the right column depending on its height, but I can't just fiddle with negative margins per se because the #mid-col-2's height will be variable as my content changes and on subpages that are shorter, which will impact the right column (at least it did when I tested it, oh, 3 reworkings ago :twisted: ) hehe.

I tried to insert the overflow:hidden; property in the #mid-section div but to no avail either, and I was concerned with the appearance as it was somewhat noticeable that the margin was shortened, although if in your estimation it is necessary I will just deal with it.

So given my new code (see below) how would you suggest that I get the right box to stay put when the middle column extends? And why does the container for the #mid-section not expand fully to handle the floated boxes? It's like it sorta expands but then stops when it gets tired of expanding Wink

I am sorry to be so verbose btw.

Thanks for all your help.

Sincerely,

Anastasios

/*-------------------LAYOUT-------------------*/ 
/* ie5 win start */ 
body 
{ 
   font: small serif; 
     margin: 0px; 
   padding: 0px; 
   line-height: 14px; 
   color: #000; 
   font-size: x-small; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   font-size: small; 
   text-align: center; 
} 
/* ie5 win end */ 



* 
{ 
   margin: 0px; 
   padding: 0px; 
} 

body 
{ 
   position: relative; 
   background-color: #e3eef6; 
   background-image: url(http://www.orthodoxchristianity.net/mambo/templates/EcclesiaGOC/images/background.jpg); 
   background-repeat: repeat-y; 
   background-position: top center; 
   text-align: center; 
   margin:0px auto; 
   padding: 0px; 
} 

#supercontainer 
{ 
   position:relative; 
   background-position: top center; 
   width:900px; 
   margin:0px auto; 
} 



#container 
{ 
   position: relative; 
   width: 831px; 
   text-align: left; 
   margin:0px auto; 
                padding: 0px; 

} 

#top-section 
{ 
   position:relative; 
   left:0; 
   top:0; 
                width: 831px; 
   margin:0px auto; 
                padding: 0px; 

} 

#mid-section 
{ 
   position:relative; 
   left:0; 
   top:0; 
   width: 831px; 
   height: auto; 
   margin: 0 0 10px 0; 
   text-align: center; 
   border: 1px solid green;

} 

#bottom-section 
{ 
   position:absolute; 
   left:0; 
                bottom: 0px; 
                width:831px; 
   border-top: 1px dotted; 
                margin-bottom: -450px; 
margin-left: -155px; 
                font-style: italic; 
                text-align: center; 
} 


#top-row-1 
{ 
   position:relative; 
   width: 831px; 
   height: 21px; 
   background-image: url(http://www.orthodoxchristianity.net/mambo/templates/EcclesiaGOC/images/datebar.jpg); 
   background-repeat:none; 
   margin:0px auto; 
                padding: 0px; 
} 


#top-row-2 
{ 
   position:relative; 
   width: 831px; 
   height: 5px; 
   line-height: 2px; 
   margin:0px auto; 
                padding: 0px; 
} 


#top-row-3 
{ 
   position: relative; 
   width: 829px; 
   height: 126px; 
   background-image: url(http://www.orthodoxchristianity.net/mambo/templates/EcclesiaGOC/images/logo.jpg); 
   background-repeat: none; 
   border: 1px solid; 
   border-color: #b3b3b3; 
   margin:0px auto; 
                padding: 0px; 
} 


#mid-col-1 
{ 
   position: relative; 
   float: left;
   top:10px; 
   left:0px; 
   width:125px; 
   padding: 10px; 
   background-color: white; 
   border: 1px solid; 
   border-color: #b3b3b3; 
   text-align: left; 
   margin:0px auto; 

} 

#mid-col-2 
{ 
   position: relative; 
   float: left;
   top: 10px;
   width:495px; 
   padding: 10px; 
   background-color: white; 
   border: 1px solid; 
   border-color: #b3b3b3; 
   text-align: left; 
   margin-left: 10px;
} 


#mid-col-3 
{ 
   position: relative; 
   float: right; 
   top:10px; 
   width:125px; 
   padding: 10px; 
   background-color: white; 
   border: 1px solid; 
   border-color: #b3b3b3; 
   text-align: left; 
   margin: 0px auto;

} 


#path 
{ 
   position: relative; 
   float: left; 
   top: 0px; 
   left: 0px; 
   height: auto; 
   width: auto; 
   background-image: none; 
   text-align: left; 
   margin:0px auto; 
   padding-top: 3px; 
   padding-left: 10px; 
   padding-right: 10px; 

} 

#datebartext 
{ 
   position: relative; 
   top: 0; 
   float: right; 
   background-image: none; 
   height: auto; 
   width: auto; 
   color: white; 
   text-align: right; 
   margin:0px auto; 
   padding-top: 3px; 
   padding-left: 10px; 
   padding-right: 10px; 
} 




td, tr, p, div 
{ 
   font-family      : Verdana, Arial, Helvetica, sans-serif; 
   font-size        : 11px; 
   color            : #333333; 
} 

table.moduletable 
{ 
   font-size        : 12px; 
   width            : 100%; 
   margin-bottom    : 15px; 
  
} 

table.moduletable th 
{ 
   font-family: Georgia; 
   border-bottom-color: #3366C0; 
   border-bottom-style: dashed; 
   border-bottom-width: 1px; 
   font-size: 13px; 
   font-weight: bolder; 
   color: #3c499d; 
   text-align:left; 
} 

li 
{ 
   line-height: 16px; 
   margin-left: 0px; 
   font-size: 12px; 
   list-style-type: none; 
} 

.pathway 
{ 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 11px; 
   color: #ffffff; 
} 

a.pathway:link, a.pathway:visited { 
   color            : #ffffff; 
   font-weight      : normal; 
} 

a.pathway:hover 
{ 
   color            : gray; 
   font-weight      : normal; 
} 

/* --Default Class Settings-- */ 

a.mainlevel:link, a.mainlevel:visited 
{ 
   color: #3366C0; 
   background-position: left; 
   text-align: left; 
   font-family: Trebuchet MS, sans-serif; 
   font-size: 13px; 
   list-style-position: inside; 
   list-style-image: url(../images/bullet2.gif); 
   margin-left: 5px; 
} 

a.mainlevel:hover 
{ 
   color: gray; 
   background-position: left; 
   text-align: left; 
} 

a.mainmenu:link, a.mainmenu:visited 
{ 
   color: #333333; 
   font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif; 
   font-weight: bolder; 
} 

a.mainmenu:hover 
{ 
   color: gray; 
   text-decoration: none; 
} 

a.sublevel:hover 
{ 
   color: gray; 
   text-decoration: none; 
} 

a.sublevel:link, a.sublevel:visited 
{ 
   color: #333333; 
   font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif; 
   font-weight: normal; 
} 

.poll 
{ 
   font-family      : Arial, Helvetica, sans-serif; 
   font-size        : 10px; 
   color            : #666666; 
   line-height      : 14px; 
} 
*/ 
/*These three are the alternating white and gray tables such as in polls.*/ 
.sectiontableheader 
{ 
   background-color : #CCCCCC; 
     color            : #7B8DA1; 
     font-weight      : bold; 
} 

.sectiontableentry1 
{ 
   background-color : #F0F0F0; 
} 

.sectiontableentry2 
{ 
   background-color : #E0E0E0; 
} 

/*The following is for the byline.*/ 
.small 
{ 
   font-family      : Verdana, Arial, Helvetica, sans-serif; 
   font-size        : 10px; 
   color            : #3366C0; 
   text-decoration  : none; 
   font-weight      : bolder; 
} 

.smalldark 
{ 
   font-family      : Verdana, Arial, Helvetica, sans-serif; 
   font-size        : 10px; 
   color            : #000000; 
   text-decoration  : none; 
   font-weight      : normal; 
} 

.contentpane 
{ 
   background       : #FFFFFF; 
} 

.contentpaneopen 
{ 
   width : 100%; 
   padding-left : 5px; 
   padding-right : 5px; 
   border-spacing : 0px; 
   margin-bottom : 25px; 
   border-bottom: dotted; 
   border-bottom-width: 1px; 
   border-top-width: 1px; 
   padding-bottom: 20px; 
   margin-bottom: 20px; 
   border-top: none; 
} 

.contentheading, .componentheading 
{ 
   font-family      : Georgia; 
   font-size        : 13px; 
   font-weight      : bold; 
   color            : #3c499d; 
   text-align       : left; 
} 

.createdate { 
   font-family      : Arial, Helvetica, sans-serif; 
   font-size        : 10px; 
   color            : #999999; 
   text-align       : left; 
} 

.modifydate 
{ 
   font-family      : Arial, Helvetica, sans-serif; 
   font-size        : 10px; 
   font-style      : italic; 
   color            : #999999; 
   text-align       : left; 

} 

.readon 
{ 
   font-family      : Arial, Helvetica, sans-serif; 
   font-size        : 9px; 
   color            : purple; 
   text-align       : left; 
} 


.button 
{ 
   font-family      : Verdana, Arial, Helvetica, sans-serif; 
   font-style       : normal; 
   font-size        : 10px; 
   font-weight      : bold; 
   background-color : #F0F0F0; 
   color            : #000000; 
   border           : 1px solid #CCCCCC; 
} 

.inputbox 
{ 
   font-family      : Verdana, Arial, Helvetica, sans-serif; 
   font-size        : 10px; 
   color            : #000000; 
   background-color : #F0F0F0; 
   border           : 1px solid #CCCCCC; 
} 


a:link, a:visited 
{ 
   font-size        : 11px; 
   color            : #000000; 
   text-decoration  : none; 
   font-family      : Verdana, Arial, Helvetica, sans-serif; 
} 

a:hover 
{ 
   color            : gray; 
} 

/* For content item titles that are hyperlink instead of Read On */ 
a.contentpagetitle:link, a.contentpagetitle:visited 
{ 
   font-family:   Tahoma, Verdana, Arial, Helvetica, sans-serif; 
   font-size:      13px; 
   font-weight:   bold; 
   color:         #000000; 
   text-align:      left; 
} 

a.contentpagetitle:hover 
{ 
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    text-align:left; 
    color: #7B8DA1; 
    text-decoration: underline; 
    font-weight: bold; 
} 

a.category:link, a.category:visited 
{ 
   color            : #333333; 
   font-weight      : bold; 
} 

a.category:hover 
{ 
   color            : #7B8DA1; 
} 

/* Styles for dhtml tabbed-pages */ 
.ontab 
{ 
   background-color: #ffae00; 
   border-left: outset 2px #ff9900; 
   border-right: outset 2px #808080; 
   border-top: outset 2px #ff9900; 
   border-bottom: solid 1px #d5d5d5; 
   text-align: center; 
   cursor: default; 
   font-weight: bold; 
   color: #FFFFFF; 
} 

.offtab 
{ 
   background-color : #e5e5e5; 
   border-left: outset 2px #E0E0E0; 
   border-right: outset 2px #E0E0E0; 
   border-top: outset 2px #E0E0E0; 
   border-bottom: solid 1px #d5d5d5; 
   text-align: center; 
   cursor: default; 
   font-weight: normal; 
} 
.tabpadding 
{ 
} 

.tabheading 
{ 
   background-color: #ffae00; 
   text-align: left; 
} 

.pagetext 
{ 
   visibility: hidden; 
   display: none; 
   position: relative; 
   top: 0; 
} 

/* for modifying {moscode} output.  Dont set the colour! */ 
.moscode 
{ 
   background-color: #f0f0f0; 
} 

/* Text passed with mosmsg url parameter */ 
.message 
{ 
   font-family : Verdana, Arial, Helvetica, sans-serif; 
   font-weight: bold; 
   font-size : 10pt; 
   color : #ff6600; 
   text-align: center; 
} 
/* custom stuff */ 
.container 
{ 
   border: solid; 
   border-width: 1px; 
   border-color: #efefef; 
   background-color: White; 
} 
.boxes 
{ 
   border: solid; 
   border-color: #efefef; 
   border-width: 1px; 

} 

/*STUFF I HAVE CUT OUT*/ 
/*table.moduletable td { 
   border           : 2px solid #ffffff; 
   font-weight      : normal; 
     list-style       : inside url(../images/bullet.gif) 2px; 
   list-style-image : url(../images/bullet.gif); 
}*/ 

/*hr 
{ 
  background       : #CCCCCC; 
  height           : 1px; 
  width            : 100%; 
}*/ 

/*.title 
{ 
   font-family: sans-serif; 
   font-size: 24px; 
   font-weight: bold; 
   color: #3c499d; 
}*/

(index.php has not changed)

the site in action is again: http://www.orthodoxchristianity.net/mambo

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

3 column layout: middle column will not move down 10px

Anastasios I'm not finding any problem with the use of overflow hidden on the#mid-section it clears the floated elements for me and in IE it sorts out the column-1 overhang(you can loose the top/left properties)

I also cannot break the layout by increasing the height of the column-2 div so that it must be the content that is causing IE to expand the parent FF will overflow such content rather than expand the parent, what was the content any elements with padding and width?, but I would loose the padding on the column-2 as this will cause problems as it increases the width and will eventuall force the right column down . it's always better to not pad main containers, put the padding on the child elements or if you have to, add a container nested inside and pad that.

It would be an idea to put the content back in so that we can see where the problem lies.

The footer needs changing loose all the position absolute and negative stuff just make it position relative with it's width. Where you have placed it means that it is sandwiched between the mid-section and container but you may want to remove the 10px bottom margin on the mid-section.

You should also validate the page for errors (html-tidy extension for FF is useful) as you have a missing closing div.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anastasios
Offline
newbie
Raleigh, NC
Last seen: 16 years 10 weeks ago
Raleigh, NC
Timezone: GMT-6
Joined: 2005-11-17
Posts: 4
Points: 0

3 column layout: middle column will not move down 10px

Hugo wrote:
Anastasios I'm not finding any problem with the use of overflow hidden on the#mid-section it clears the floated elements for me and in IE it sorts out the column-1 overhang(you can loose the top/left properties)

I also cannot break the layout by increasing the height of the column-2 div so that it must be the content that is causing IE to expand the parent FF will overflow such content rather than expand the parent, what was the content any elements with padding and width?, but I would loose the padding on the column-2 as this will cause problems as it increases the width and will eventuall force the right column down . it's always better to not pad main containers, put the padding on the child elements or if you have to, add a container nested inside and pad that.

It would be an idea to put the content back in so that we can see where the problem lies.

The footer needs changing loose all the position absolute and negative stuff just make it position relative with it's width. Where you have placed it means that it is sandwiched between the mid-section and container but you may want to remove the 10px bottom margin on the mid-section.

You should also validate the page for errors (html-tidy extension for FF is useful) as you have a missing closing div.

Hugo.

Hugo,

I applied your suggestions and got everything to work perfectly no matter what the length of the text (I stuck in some lorem ipsum text to make it really long). So the problem must lie in my php module that was being imported. I will confer with my friend who does PHP to try and find out where the problem lies.

I had validated my page before I posted on this site as I know what happens to people who post questions without validating first Wink But what happened was in the process of changing it around today I inadvertently cut out a div close tag. Thanks for spotting that and I will make sure I re-validate every time I make changes from now on.

I really appreciate all of your help and the other poster's help. You have really helped me out greatly!! I think that once I get the PHP edited it will work fine, but I will come back nevertheless with a final update once I get it working the way I want it.

Sincerely,

Anastasios