IE/FF Float issue

[SMDStudios]

I have a multi-coloum layout that is giving me a bit of a problem. To best explain my issue you can see how the homepage and secondary pages at http://www.theliveyearbook.com/schools/.
un: demo
pw: demodemo

In IE the second column is pushing down because the first div wants to take up 100% of the space. Yes I can add a witdh value in pixels to take care of that but my secondary pages don't have that second column. FF is fine of course.

[musicman77]

can you post the CSS?

[SMDStudios]

Here it is....

/*Compass Design layout.css CSS file*/
 
 * {
 margin:0;
 paddin:0;
 }
 
 body {
 	background: url(images/big-bg.gif) repeat-y 50% 0px;
 	text-align:center; /*center hack*/
 	font-size:76.1%;
 	font-family:Verdana, Arial, Helvetica, sans-serif;
 	line-height:1.3em;
 }
 
 h1,h2,h3,h4,h5,h6,p,blockquote,form,label,dl,fieldset,address {
 margin: 0.5em 0;
 }
 li,dd {
 margin-left:1em;
 }
 fieldset {
 padding:.5em;
 }
 
 #wrap {
 	/*background-image: url(images/bg.gif);
 	background-repeat: repeat-y;*/
 
 	text-align: left;
 	width: 800px;
 	height: auto;
 	margin-right: auto;
 	margin-left: auto;
 	margin-top: 0px;
 	margin-bottom: 0px;
 	padding: 0px;
 }
 
 #header {
 	background-image: url(images/header.gif);
 	background-repeat: no-repeat;
 	height:138px;
 	text-align:left;
 }
 
 #nav {
 	background-image: url(images/nav-bg.gif);
 	background-repeat: repeat-x;
 	height:30px;
 	border-bottom: 1px solid;
 	border-color: #ffffff;
 	margin: 0px;
 	padding: 0px;
 }
 
 #footer {
 	background-image: url(images/footer-bg.gif);
 	background-repeat: repeat-x;
 	height:44px;
 	border-top: 1px solid;
 	border-color: #ffffff;
 	clear:both;
 }
 
 #main-body {
 	float:left;
 	width:516px;
 }
 
 #sidebar-2 {
 	background-color:#243139;
 	float:right;
 	width:143px;
 	overflow:hidden;
 	margin-left:-3px;
 }
 
 #content {
 	float:left;
 	overflow:hidden;
 	padding:1px;
 }
 
 #sidebar-3 {
 	float:right;
 	overflow:hidden;
 }
 
 #sidebar {
 	background-color:#243139;
 	float:left;
 	width:140px;
 	border: 0px 1px 0px 0px solid;
 	border-color: #000000;
 }
 
 .inside {
 padding:10px;
 }
 
 .moduletable-main {
 	width:349px;
 
 	
 }
 
 .moduletable-main h3 {
 	background-image: url(images/header-bg-long.gif);
 	background-repeat: no-repeat;
 	color:#ffffff;
 	font-size:12px;
 	height:20px;
 	margin:0;
 	padding: 5px 0 0 5px;
 	border: 1px solid;
 	border-color: #000000;
 }
 
 .moduletable-lside {
 	color:#ffffff;
 }
 
 .moduletable-lside #mod_login_greeting-lside {
 	padding:5px;
 }
 
 .moduletable-lside h3 {
 	padding:5px 5px 0px 5px;
 	font-size:12px;
 	color:#ffffff;
 }
 
 .moduletable-lside form {
 	padding:3px;
 }
 
 .moduletable-lside select {
 	font-size:10px;
 }
 
 .moduletable-rtside {
 	width:165px;
 	border: 1px solid;
 	border-color: #000000;
 }
 
 .moduletable-rtside th {
 	background-image: url(images/header-bg-short.gif);
 	background-repeat: no-repeat;
 	color:#ffffff;
 	height:0px;
 	padding: 5px 0 4px 5px;
 	border-bottom: 1px solid;
 	border-color: #000000;
 }
 
 .moduletable-footer {
 	padding:15px 5px 0px 5px;
 	font-size:12px;
 	color:#ffffff;
 }
 
 /*Begin: Main Site Navigation*/
 .moduletable-mainnav {
 	padding: 0; /*the padding is removed so the menu fills the whole module box*/
 	margin: 0;
 	font-family: Helvetica, sans-serif;
 	color: #ffffff;
 	font-weight:bold;
 }
 
 #navcontainer ul {
 	margin: 0;
 	padding:0px;
 	padding-top:9px;
 	list-style-type: none;
 	text-align: center;
 	height: 20px;
 }
 
 #navcontainer ul li { display: inline; }
 
 #navcontainer ul li a {
 	padding-right: 16px;
 	padding-left: 16px;
 	text-decoration: none;
 	color: #ffffff;
 
 }
 
 #navcontainer ul li a:hover {
 	padding-top: 3px;
 	padding-right: 15px;
 	padding-bottom: 5px;
 	padding-left: 15px;
 	color: #fff;
 	background-position: 0 -82px;
 	background: url(images/nav-item-bg.gif) top left repeat-x;
 	border: 1px solid;
 	border-color: #000000;
 }
 
 /*End: Main Site Navigation*/
 
 /*Begin: News Navigation*/
 
 .moduletable-test {
 	padding: 0px 0px 0px 0px; /*the padding is removed so the menu fills the whole module box*/
 }
 
 .moduletable-events {
 	text-align:center;
 	padding:0; /*the padding is removed so the menu fills the whole module box*/
 	width:349px;
 }
 
 .mainlevel-news {
 	width:100%
 }
 
 .moduletable-events ul#mainlevel-news {
 	height:20px;
 	margin-top: 5px;
 	margin-left: 0;
 	padding-left: 0px;
 	white-space: nowrap;
 }
 
 #mainlevel-news li {
 	display: inline;
 	list-style-type: none;
 	margin: 0px 0px 0px 0px;
 	padding: 0px 5px 0px 5px;
 }
 
 #mainlevel-news a { 
 	padding: 0px 5px 0px 5px; 
 	margin: 0px 0px 0px 0px;
 	background-color: #dce7ef;
 	border-top: 2px solid;
 	border-bottom: 2px solid;
 	border-color: #548bad;
 	text-decoration: none;
 }
 
 #mainlevel-news a:link, #mainlevel-news a:visited {
 	color: #000000;
 	text-decoration: none;
 }
 
 #mainlevel-news a:hover {
 	color: #ffffff;
 	background-color: #548bad;
 	border-top: 2px solid;
 	border-bottom: 2px solid;
 	border-color: #548bad;
 	text-decoration: none;
 }
 
 .moduletable-ajaxnews a {
 	color: #000000;
 }
 
 /*End: News Navigation*/
 
 /*Begin: User Navigation*/
 .moduletable-lside ul#mainlevel-usermnu {
 	margin: 0px;
 	padding: 0px;
 	list-style-type: none;
 	font-family: Arial, Helvetica, sans-serif;
 }
 
 #mainlevel-usermnu li {
 	display: inline;
 	list-style-type: none;
 	margin: 0px;
 	padding: 0px;
 	
 }
 
 #mainlevel-usermnu  a {
 	display: block;
 	padding: 3px;
 	background-color: #084162;
 	border-bottom: 1px solid #eee;
 	color: #EEE;
 	text-decoration: none;
 }
 
 #mainlevel-usermnu  a:link, #navlist a:visited {
 	text-decoration: none;
 }
 
 #mainlevel-usermnu  a:hover
 {
 background-color: #369;
 color: #fff;
 }
 /*End: User Navigation*/
 
 /*Joomla CSS*/
 a {
 	text-decoration:underline;
 	color:#336699;
 }
 a:hover{
 	color:#336699;
 }
 h1,.componentheading{
 	background-image: url(images/header-bg-longer.gif);
 	background-repeat: repeat-x;
 	color:#ffffff;
 	font-size:12px;
 	font-weight:bold;
 	height:22px;
 	width:509px;
 	margin:0px;
 	padding: 3px 0 0 5px;
 	border: 1px solid;
 	border-color: #000000;
 }
 
 /*comment out*/
 .contentpaneopen {
 	width:514px;
 	margin:0px 2px 0px 1px;
 	padding: 0px;
 	border-collapse: collapse;
 }
 .contentheading {
 	background-image: url(images/header-bg-longer.gif);
 	background-repeat: repeat-x;
 	color:#ffffff;
 	font-size:12px;
 	font-weight:bold;
 	height:22px;
 	width:513px;
 	margin:0px;
 	padding: 5px 0 0 10px;
 	border: 1px solid;
 	border-color: #000000;
 	
 }
 
 .contentpane td  {
 	padding:5px;
 }
 
 .sectiontableheader {
  background-color:#bebebe;
 }
 
 h3{
 font-size:1.3em;
 line-height:1.3em;
 }
 h4{
 font-size:1.2em;
 line-height:1.2em;
 }
 h5{
 font-size:1.1em;
 line-height:1.1em;
 }
 h6{
 font-size:1em;
 line-height:1em;
 font-weight:bold;
 }
 #footer,.small,.createdate,.modifydate,.mosimage_caption{
 font:0.8em Arial,Helvetica,sans-serif;
 color:#999;
 }
 .moduletable- spare{
 margin-bottom:1em;
 padding:5px;
 /*padding for inside text*/
 }

[Paul O'B]

Hi,

I think you will have to give a width to that left middle column because your float without width will expand to 100% when any element that it contains has "layout" ("haslayout" see faq). This means that any other content must start underneath because there is simply no room above.

If the content of that middle left column was layout free then the next float should slide up alongside. However any time you give a dimension (or float anything else then) effectively the parent is extended to 100% width.

If you don't want other pages to get this width then add a class in the body and style the content for that page only.

e.g.
body.two-column #content{width:349px} (add the correct width in there.)
<body class="two-column">

That footer looks a bit odd half way up the page with the full length columns going beyond the footer. You would be better either having the columns only gouing to the footer or make sure the footer is at the bottom.

e.g.

http://www.pmob.co.uk/temp/3col-centred-template6.htm




I