[3/3 SOLVED] Floating-div overlap, height problem, IF/ELSE Width prob. - Joomla! Forum - community, help and support

alright, there. 

these 2 related problems apply firefox , ie (in ie positioning works 2nd problem still occurs).

1. maincontent area site contains mosmainbody , right , left sidebar not filling in full height. 
2.  in addition '.conent' div mosmainbody stretching entire width sidebars overlapping.  last problem causing positioning issues background images , such.  [see images below]

in perfect world divs exclusive leftsidebar being 165px floated left, rightsidebar being 165px floated right, , .content filling space inbetween automotically.

the index.php , template_css.css below full template images , available download here: http://www.jliesch.net/images/joomla/hammok1.zip.

help appreciated.

the .content div outlined blue can see, overlapping sidebar divs.


----------css

code: select all

/* work out:

indent1.png file hardcoded mod_mainmenu.php.  temporary fixed 1x1 empty png file

*/

/* css styles */

html {
   height: 100%;
   margin-bottom: 1px; /*vertical scrollbar show resolutions*/
}

body {
   background-color: #666;
   font-family: myriad web,lucida sans,arial,helvetica,sans-serif;
   font-size:13px;
   line-height: 20px;
}

.content {
   border:1px solid #0066ff;
}
.code {
   background-color: #fff;
   border: 1px solid #bbb;
}

body.mcecontentbody {
background-color: #ffffff !important;
}

.clr {
   clear:both;
}

/* layout */

#pagewidth-1024 {
   width:946px;
   text-align:left;
   margin-left:auto;
   margin-right:auto;
   background-color: #fff;
   padding:2px;
}

#mainbodywidth-1024 {
   width:946px;
   text-align:left;
   margin-left:auto;
   margin-right:auto;
   margin-bottom: 10px;
   background-color: #fff;
   padding:2px;
}

#bottombodywidth-1024 {
   width:946px;
   text-align:left;
   margin-left:auto;
   margin-right:auto;
   margin-bottom: 0px;
   background-color: #fff;
   padding:2px;
}

/* pagewidth-1024 styles */

#header {
   height:100px;
   width:100%;
   background: url(../images/banner.png) no-repeat;
}

#topmenu {
   height:25px; /* fix background image 'buttons_top.png' height */
   width: 100%;
   background: url(../images/buttons_top.png) repeat-x;

}

ul#mainlevel-nav
{
   list-style: none; /*removes list dots*/
   padding: 0;
   margin: 0;
}

ul#mainlevel-nav li
{
   float: left;
   margin: 0;
   font-size: 14px;
   line-height: 26px; /* determines text positioning */
   white-space: nowrap; /*not sure if important*/
}

ul#mainlevel-nav li a
{
   padding-left: 15px;
   padding-right: 15px;
   padding-bottom: 4px; /*extends border line bottom*/
   text-decoration: none;
   color: #fff;
   border-right: 1px solid #ccc;
   font-family:"arial narrow",arial;
}

ul#mainlevel-nav li a:hover /* on menu hover, may need add javascript menu */ {
   background: #0099ff;
}

#search {
   float: right;
   padding-right: 10px;
   overflow: hidden;
}

#search .inputbox {
   border: 0px;
   margin-top:3px;
   padding: 3px 3px 2px 5px;
   font-size: 12px;
   color: #e4671b;
}

#advertisement {
   margin-top:2px;
   height:150px;
   width:100%;
   background: url(../images/welcome.png) no-repeat;
}

/* mainbodywidth-1024 */

#leftsidebar {
   float:left;
   width:165px;
   margin-top:2px;
   margin-left:1px;
   margin-right:8px;
}

.content {
   padding:0;
   margin:0;
}

#rightsidebar {
   float:right;
   width:165px;
   margin-top:2px;
   margin-left:8px;
   margin-right:1px;
}

/* menu header background image options. */
/* in modules, add 1 of choices below module , menu suffix  */
/* (options are: blue[default no suffix], 'red', 'orange', 'green' */

/*****[default] blue menu bg when no suffix added*****/


div.moduletable {
   margin: 3px 0 3px 0;
}

table.moduletable th, div.moduletable h3 {
   background: url(../images/menu_head.png) no-repeat;
   color: #fff;
   text-align: left;
   padding-left: 35px;
   padding-bottom: 5px;
   height: 15px;
   line-height: 20px;
   font-weight: bold;
   font-size: 11px;
   text-transform: uppercase;
   margin: 0 0 2px 0; /* top right bottom left*/
}

a.mainlevel:link, a.mainlevel:visited {
   display: block;
   background: url(../images/menu_point.png) no-repeat;
   background-position:8px 10px;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   color: #666;
   padding-top: 5px;
   text-indent:18px;
   height: 20px;
   width: 100%;
   text-decoration: none;
   border-bottom:1px dotted #ccc;
}

a.mainlevel:hover {
   background-position: 3px 10px;
   text-decoration: none;
   color: #0066ff;
}

a.sublevel:link, a.sublevel:visited {
   display: block;
   background: url(../images/menu_point.png) no-repeat;
   background-position:8px 6px;
   background-color: #f2f2f2;
   padding-left: 20px;
   font-size: 11px;
   font-weight: bold;
   color: #666;
   text-decoration: none;
   border-bottom:1px dotted #ccc;
}

a.sublevel:hover {
   color: #0066ff;
   text-decoration: none;
}

/*****'red'*****/


div.moduletablered {
   margin: 3px 0 3px 0;
}

table.moduletablered th, div.moduletablered h3 {
   background: url(../images/menu_head_red.png) no-repeat;
   color: #fff;
   text-align: left;
   padding-left: 35px;
   padding-bottom: 5px;
   height: 20px;
   line-height: 20px;
   font-weight: bold;
   font-size: 11px;
   text-transform: uppercase;
   margin: 0 0 2px 0; /* top right bottom left*/
}

a.mainlevelred:link, a.mainlevelred:visited {
   display: block;
   background: url(../images/menu_point.png) no-repeat;
   background-position:8px 10px;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   color: #666;
   padding-top: 5px;
   text-indent:18px;
   height: 20px;
   width: 100%;
   text-decoration: none;
   border-bottom:1px dotted #ccc;
}

a.mainlevelred:hover {
   background-position: 3px 10px;
   text-decoration: none;
   color: #e3661a;
}

a.sublevelred:link, a.sublevelred:visited {
   display: block;
   background: url(../images/menu_point.png) no-repeat;
   background-position:8px 6px;
   background-color: #f2f2f2;
   padding-left: 20px;
   font-size: 11px;
   font-weight: bold;
   color: #666;
   text-decoration: none;
   border-bottom:1px dotted #ccc;
}

a.sublevelred:hover {
   color: #e3661a;
   text-decoration: none;
}

/*****'orange'*****/


div.moduletablorange {
   margin: 3px 0 3px 0;
}

table.moduletableorange th, div.moduletableorange h3 {
   background: url(../images/menu_head_orange.png) no-repeat;
   color: #fff;
   text-align: left;
   padding-left: 35px;
   padding-bottom: 5px;
   height: 20px;
   line-height: 20px;
   font-weight: bold;
   font-size: 11px;
   text-transform: uppercase;
   margin: 0 0 2px 0; /* top right bottom left*/
}


a.mainlevelorange:link, a.mainlevelorange:visited {
   display: block;
   background: url(../images/menu_point.png) no-repeat;
   background-position:8px 10px;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   color: #666;
   padding-top: 5px;
   text-indent:18px;
   height: 20px;
   width: 100%;
   text-decoration: none;
   border-bottom:1px dotted #ccc;
}

a.mainlevelorange:hover {
   background-position: 3px 10px;
   text-decoration: none;
   color: #f38911;
}

a.sublevelorange:link, a.sublevelorange:visited {
   display: block;
   background: url(../images/menu_point.png) no-repeat;
   background-position:8px 6px;
   background-color: #f2f2f2;
   padding-left: 20px;
   font-size: 11px;
   font-weight: bold;
   color: #666;
   text-decoration: none;
   border-bottom:1px dotted #ccc;
}

a.sublevelorange:hover {
   color: #f38911;
   text-decoration: none;
}

/*****'green'*****/


div.moduletablegreen {
   margin: 3px 0 3px 0;
}

table.moduletablegreen th, div.moduletablegreen h3 {
   background: url(../images/menu_head_green.png) no-repeat;
   color: #fff;
   text-align: left;
   padding-left: 35px;
   padding-bottom: 5px;
   height: 20px;
   line-height: 20px;
   font-weight: bold;
   font-size: 11px;
   text-transform: uppercase;
   margin: 0 0 0 0; /* top right bottom left*/
}

a.mainlevelgreen:link, a.mainlevelgreen:visited {
   display: block;
   background: url(../images/menu_point.png) no-repeat;
   background-color:#f2f2f2;
   background-position:8px 10px;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   color: #666;
   padding-top: 5px;
   text-indent:18px;
   height: 20px;
   width: 100%;
   text-decoration: none;
   border-bottom:1px dotted #ccc;
}

a.mainlevelgreen:hover {
   background-position: 3px 10px;
   text-decoration: none;
   color: #3f8d3c;
}

a.sublevelgreen:link, a.sublevelgreen:visited {
   display: block;
   background: url(../images/menu_point.png) no-repeat;
   background-position:8px 6px;
   background-color: #f2f2f2;
   padding-left: 20px;
   font-size: 11px;
   font-weight: bold;
   color: #666;
   text-decoration: none;
   border-bottom:1px dotted #ccc;
}

a.sublevelgreen:hover {
   color: #3f8d3c;
   text-decoration: none;
}
/* end menu header background image options */

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #cccccc;
  font-size: 14px;
  font-weight: bold;
}

.button {
   border:1px solid #ccc;
   color:#333;
   text-transform: uppercase;
   font-size: 9px;
}

a:link, a:visited {
   color: #e4671b;
   text-decoration: none;
   font-weight: bold;
}

a:hover {
   text-decoration: underline;
}

table.contentpaneopen {
   border-spacing: 0px;
}

table.contentpaneopen td {
   padding-right: 5px;
   padding-left: 5px;
}

table.contentpane {
  width: 75%;
   padding: 0px;
   border-collapse: collapse;
   border-spacing: 0px;
   margin: 0px;
}

table.contentpane td {
   margin: 0px;
   padding: 0px;
}

table.contentpaneopen fieldset {
   border: 0px;
   /*border-bottom: 1px solid #eee;*/
}

.pagenavcounter {
   color: #c65417;
   font-size: 11px;
}

td, tr {
   padding:0px;
   margin:0px;
}   
 /*close not sure why?*/

.inputbox {
   padding: 2px;
   border:solid 1px #cccccc;
   background-color: #ffffff;
}

.componentheading { /*fix positioning after .content corrected , add background image */
   background: url(../images/component_head.png) no-repeat;
   background-position:175px 6px;
   color: #666666;
   text-align: left;
   padding-top: 4px;
   padding-left: 4px;
   height: 21px;
   font-weight: bold;
   font-size: 12px;
   text-transform: uppercase;
}

.contentcolumn {
   padding-right: 5px;
}

.contentheading {
   height: 30px;
   color: #c65417;
   font-weight: bold;
   font-size: 16px;
   white-space: nowrap;
   border-bottom:1px dotted #ccc;
}

form {
   font-size: 12px;
   padding:1px;
}

.pagenav {
   background: #e2e2e2;
   font-size:11px;
   border:1px solid #ccc;
   text-transform:uppercase;
   font-weight:bold;
   
}

.contentpagetitle {
   font-size: 13px;
   font-weight: bold;
   color: #cccccc;
   text-align:left;
}
td.buttonheading {
   border-bottom:1px dotted #ccc;
}

table.searchinto {
   width: 100%;
}


table.searchintro td {
   font-weight: bold;
}


table.moduletable {
   width: 100%;
   margin-bottom: 5px;
   padding: 0px;
   border-spacing: 0px;
   border-collapse: collapse;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #666;
  color:#fff;
  padding: 4px;
}

.sectiontableentry1 {
   background-color : #fff;
}

.sectiontableentry2 {
   background-color : #f2f2f2;
}

.small {
   color: #666;
   font-size: 11px;
}

.createdate {
   height: 15px;
   color: #999;
   font-size: 11px;
}

.modifydate {
   height: 15px;
   padding-top: 10px;
   color: #999;
   font-size: 11px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
    color: #666666;
   text-align: left;
   padding-top: 2px;
   padding-left: 4px;
   height: 21px;
   font-weight: bold;
   font-size: 10px;
   text-transform: uppercase;
}

.highlight {
   background-color: yellow;
   color: blue;
   padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

span.article_seperator {
   display: block;
   height: 1.5em;
}

.back_button {
   text-transform: uppercase;
   font-size: 9px;
}
   
/* bottombodywidth-1024 */

#articlelinkmenus {
   height:150px;
   background:url(../images/articlelinksmenu_bg.png) repeat-x;
   background-position:bottom;
   /*border-top:1px solid #333;*/
}

#articlelinkmenus h3{
   height:15px;
   background:url(../images/articlelinkmenus.png) repeat-x;
   color:#fff;
}
#articlelinkmenus {
   font-size:11px;
}

#pathway {

   line-height: 10px;
   font-size:10px;
   background:#f2f2f2;
   font-weight:bold;
   border-top:1px solid #ccc;
   border-bottom:1px dotted #ccc;
}
/*****userscode width options*****/
#user1_33 {
   float:left;
   width:33.3%;
}

#user2_33 {
   float:left;
   width:33.2%;
   border-left:1px dotted #ccc;
}

#user5_33 {
   float:left;
   width:33.2%;
   border-left:1px dotted #ccc;
}

#user1_50 {
   float:left;
   width:50%;
}

#user2_50 {
   float:left;
   width:49.8%;
   border-left:1px dotted #ccc;
}

#user5_50 {
   float:left;
   width:49.8%;
   border-left:1px dotted #ccc;
}

#user1_100 {
   width:100%;
}

#user2_100 {
   width:100%;
}

#user5_100 {
   width:100%;
}

/* footer */
#footer {
   font-size:9px;
   color:#f2f2f2;
}



----------index.php

code: select all

<?php defined( '_valid_mos' ) or die( 'direct access location not allowed.' ); ?>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<?php $iso = split( '=', _iso );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; <?php echo _iso; ?>" />
<?php mosshowhead(); ?>
<?php
if ( $my->id ) {
   initeditor();
}
?>
<meta http-equiv="content-type" content="text/html; <?php echo _iso; ?>" />
<link href="<?php echo $mosconfig_live_site; ?>/templates/hammok1/css/template_css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="pagewidth-1024" >
   <!-- site header-->
   <div id="header" >
   </div>
   <!-- horizontal menu-->
   <div id="topmenu">
   <!--hm/load menu-->
      <?php if (moscountmodules( "user3" )) { ?>
            <?php mosloadmodules ( 'user3',-1); ?>
      <?php } ?>
   <!--hm/load search-->   
      <?php if (moscountmodules( "user4" )) { ?>
            <div id="search">
               <?php mosloadmodules ( 'user4',-1); ?>
            </div>
      <?php }   ?>
   </div>
   
   <!--advertisement module (user created module under advert1)-->
   <?php if (moscountmodules( "advert1" )) { ?>
            <div id="advertisement">
               <?php mosloadmodules ( 'advert1',-2); ?>
            </div>
   <?php }   ?>
</div> <!--close pagewidth-1024-->

<div class='clr'>
</div>
   
<div id="mainbodywidth-1024">
   <!--mbw/left sidebar-->
   <div id="leftsidebar">
      <?php if (moscountmodules( "left" )) {
            mosloadmodules ( 'left',-2);
         } ?>
   </div>
   <!--mbw/right sidebar top modules-->
   <?php if ((moscountmodules( "right" )) || (moscountmodules( "top" ))) { ?>
         <div id="rightsidebar">
            <?php mosloadmodules ( 'top',-2); ?>
            <?php mosloadmodules ( 'right',-2); ?>
         </div>
   <?php }   ?>
   <!--mbw/content-->
      <div class="content">
         <?php mosmainbody(); ?>
      </div>
</div> <!--close mainbodywidth-1024-->

<div class='clr'>
</div>

<div id="bottombodywidth-1024">
<!--userscode - adjust size of user1,2,5 columns depending on published-->
<?php
if (moscountmodules( "user1" ) & moscountmodules( "user2" ) & moscountmodules( "user5" )) $user_width=33; //all three
else if ( //only two
   (moscountmodules( "user1" ) & moscountmodules( "user2" )) |
   (moscountmodules( "user5" ) & moscountmodules( "user2" )) |
   (moscountmodules( "user5" ) & moscountmodules( "user1" ))
   ) $user_width=50;
else if ( //only one
   (moscountmodules( "user1" )) |
   (moscountmodules( "user2" )) |
   (moscountmodules( "user5" ))
   ) $user_width=100;
else $user_width=0; //none

if ($user_width != 0) { //if published run code, else skip it
?>

   <div id="articlelinkmenus">
      <?php if (moscountmodules( "user1" )) { ?>
            <div id="user1_<?php echo $user_width; ?>">
               <?php mosloadmodules ( 'user1',-2); ?>
            </div>
      <?php } ?>
      <?php if (moscountmodules( "user2" )) { ?>
            <div id="user2_<?php echo $user_width; ?>">
               <?php mosloadmodules ( 'user2',-2); ?>
            </div>
      <?php } ?>
      <?php if (moscountmodules( "user5" )) { ?>
            <div id="user5_<?php echo $user_width; ?>">
               <?php mosloadmodules ( 'user5',-2); ?>
            </div>
      <?php } ?>
   </div>
<?php } ?>
<!--userscode end-->
      <div id="pathway">
         <?php mospathway() ?>
      </div>
</div> <!--close bottombodywidth-1024-->

<!--footer-->
   <div id="footer" >
      <?php include_once( $mosconfig_absolute_path .'/includes/footer.php' ); ?>
      <?php mosloadmodules( 'debug', -1 );?>
   </div>
</body>
</html>


with firefox, if div floated , parent not, reason visual effect outer container not stretch around floated element ( though behaves though in terms of e.g. margin auto etc

this may affecting site.

as centering margin auto, applying float e.g. left spoil centering.

the way around have outer container of fixed width , centered, , drop container in float left

code: select all

#outer {
  width: 760px;
  margin: 30px auto;
}

#container  {
    width: 760px;
    float: left;
    background: #fff;
    }