Joomla module css formated errors

[thelumpster]

For some reason module content in the left column of the link before runs off the bottom of the screen. The DIV stops where it is supposed to, but modules don’t extend the container DIV. Any help would be appreciated
http://traffikcone.com/joomla_harrylevy/hl/

heres the css:

@charset "UTF-8";

/* CSS Document */

body{

padding:0;

margin:0;

background:url(../images/background_blue_white.gif);

background-repeat:repeat-x;

background-attachment:fixed;

}

div#container {

background:url(../images/main_background.png) repeat-y; background-position:14px 200px;

position:relative;

width : 1000px;

margin: 0 auto;

padding-top: 0;

text-align:left;

}

div#branding { z-index : 1; position : relative; width : 100%; height : 165px; }

div#branding h1 {margin:0px; z-index : 2; position : relative; left : 10px; top : 0px; width: 980px; height : 205px; background : url(../images/header_main.png) no-repeat;text-indent:-9999px; }

div#phone { z-index : 8; position : absolute; right : 55px; top :58px;font-family: Georgia,"Arial Black", Arial, sans-serif; font-size:30px; font-weight:bold;line-height:1em; text-align:right; color:#ffffac;width:160px;}

div#email a{ z-index : 9; position : absolute; right : 55px; top :117px;font-family: Georgia,"Arial Black", Arial, sans-serif; font-size:18px; font-weight:bold;line-height:1em; text-align:right; color:#ffffac;text-decoration:none; }

/* MAIN NAV Styles*/

#mainNav {

float:left;

z-index : 3

background-color:#BA0000;

width:752;

z-index:1;

display:block;

left: 200px;

top: -23px;

position: relative;/* this gives IE6 hasLayout to properly clear */

clear: both; /* this clear property forces the .container to understand where the columns end and contain them */

}

div#mainNav ul, div#mainNav li {

font-family: Georgia,  "rosewood-std-fill", Georgia, serif; font-weight:bold;

display: inline;

margin:0;

padding:0;

list-style:none;

}

div#mainNav a{

display:block;

padding:0 5px 0 5px;

border-right:2px solid #f04e38

}

div#mainNav a:link{

padding-top:5px;

padding-bottom:5px;

color:#FFC;

float:left;

text-decoration:none;

}

div#mainNav  a:visited{

padding-top:5px;

padding-bottom:5px;

color:#FFF;

float:left;

text-decoration:none;

}

div#mainNav a:hover{

background-color:#ffffac;

color:#BA0000;

padding-top:5px;

padding-bottom:5px;



}

div#mainNav li i {

display:none;

}

div#left {

background:#F04E38;

/*background:url(../images/left_menu_back.png) no-repeat 0 100%; */

width:151px;

margin:0px 0px 0px 56px;

padding:26px 5px 0px 5px;

float:left;

position: absolute;/* this gives IE6 hasLayout to properly clear */

top:195px; bottom: 0px;

clear: both; /* this clear property forces the .container to understand where the columns end and contain them */

}

div #mainContent {

display:block;

float:left;

margin-left:215px;

width:730px;

padding-top:10px;

position: relative;/* this gives IE6 hasLayout to properly clear */





}



//side menu styles

#menu_sub_01 {

}

div#menu_sub_01 ul {padding:0px 0px 0px 0px; margin:0 0 20px 0;list-style:none; font-family:  "rosewood-std-fill", Georgia, serif; font-weight:bold;}

div#menu_sub_01   li a:link{display:block;text-decoration:none; color:#ffffff;background-color:#BA0000; font-size:12px;text-align:right; padding: 5px;margin:0px 0 4px 0;}

div#menu_sub_01 li a:visited{display:block;text-decoration:none; color:#ffffff;background-color:#BA0000; font-size:12px;text-align:right; padding: 5px;margin:0px 0 4px 0;}

div#menu_sub_01  li a:hover{display:block;text-decoration:none; color:#632023;background-color:#ffffac; font-size:12px;text-align:right; padding: 5px;margin:0px 0 4px 0;}

div#menu_sub_01 li a:active{display:block;text-decoration:none; color:#854146;background-color:#Fcfdde; font-size:12px;text-align:right; padding: 5px;margin:0px 0 4px 0;}

/* get rid of the annoying LOF showcase item Number*/

div#menu_sub_01   li i {

display:none;

}

/* ~~ The footer ~~ */

div #footer {color:#ffffac;

text-align:center;

padding: 5px;margin:0px 0 2px 0;

height:35px;

background:url(../images/footer_back.png) 0 100%;

margin 0px;

padding: 2px;

position: relative;/* this gives IE6 hasLayout to properly clear */

clear: both; /* this clear property forces the .container to understand where the columns end and contain them */

}

div #footer  p { font-size:14px;font-weight:bold; }

div #footer a:link { color:#fff; text-decoration:none;}

div #footer a:hover{ text-decoration:none; color:#BA0000;background-color:#ffffac;}

div #footer a:visited{ color:#fff; text-decoration:none;}

[TheDoc]

Your #left div has an absolute position, so it’s not going to extend your content div.

[thelumpster]

Thanks, I think you could be right. Been having problems with my positioning. If I remove or change to relative it throws everything out of whack. Any suggestions on how to fix it?

[TheDoc]

1) Remove the absolute position from #left
2) Remove the margin-left from #mainContent
3) Add float: right; to #mainContent

That should be enough to get ya started!

[thelumpster]

Your a STAR!,
thank you very much, it was the margin-left that kept throwing any changes out.
Much appreciated
:D

[Author]

Posts