DIV fixed to it's minimum height in Firefox

[treigh]

Hi guys,

I'm testing a website that I'm currently buildind and when I load it in Firefox, I'm getting two display problems:

1. My main content DIV is fixed to it's minimum height and not expanding to fit the content.
2. The second DIV containing the travel planner is not floating to the right, unless I add clear:both property which will break the main layout.

I just can't seem to find the bug and I've already spent a great time on it.
You can view my source codes for details.

http://pjx.itconsmedia.com/eacottawa/directions.html

The site is published on my testing domain, so the Google map will not display, please don't mind it.

Thanks for any help

[Excavator]

Hello treigh,
Happy New Year!

Adding overflow: auto; to #content clears the floats but adds scrollbars because your box model is off somewhere. Need to adjust your widths to fix that.

overflow:auto; method of clearing floats

If you run it through the validator (see links below) it finds your using several id's more than once.

Try these changes to your CSS:

#sub {
	position : relative;
	width : 734px;
	min-height : 355px;
	display: block;
}
#sub .top {position : relative; width : 734px; height : 50px; background : url(../images/bg/bg-subheading.png) no-repeat; text-indent : 15px;}
#sub .top .title {color : #f1f1f1; font-family : Arial, Helvetica, sans-serif; font-size : 18px; padding-top : 15px;}
#sub .body {
position : relative; 
width : 734px; 
min-height : 355px; 
height : auto; overflow: auto;
margin : 0 auto; 
background : url(../images/bg/bg-subbody.png) repeat-y; display : block;
}
#sub .body .profilebox {position : relative; width : 190px; height : 252px; float : right; margin-right : 10px; margin-top : 20px;}
#sub .body .content {position : relative; width : 500px; display : block; margin-left : 15px; margin-top : 20px; float : left; line-height : 20px; color : #5a5a5a;}
#sub .body .content .p {border-left : 1px solid #cccccc; margin-bottom : 10px; padding-left : 10px;}
#sub .body .map {
position : relative; 
width : 400px; 
height: 100%; 
display : block; 
padding: 2px; 
border: 1px dashed #dfdfdf; 
margin-left : 15px; 
margin-top : 20px; 
/*float: left;   - remove*/
 line-height : 20px; color : #5a5a5a;
}
#sub .body .directions {
width : 295px; 
float : right; 
clear: right;
margin-right : 10px; 
margin-top : 20px; 
border: 1px dashed #dfdfdf;
}
#sub .btm {position : relative; width : 734px; height : 48px; background : url(../images/bg/bg-subfooter.png) no-repeat;}

#content {
	padding : 0 0 18px 0;
	position : relative;
	margin : 0 auto;
overflow: auto;
	color : #333;
	display : block;
}

[treigh]

Happy new year Excavator and thank you so much for the tips.

I fixed most of the problems, as I noticed that a parent DIV should only have 1 element floating to the right and use it as a container for all other divs that I would want in the same section.

I just need your help with attaching my body div and the top div. There's an empty space between them and I'm still trying to figure it out. I know I will find it, but if you get it faster It will help me spee this thing up.

http://pjx.itconsmedia.com/eacottawa/directions.html

Thanks again!

[Excavator]

It's looking better!
Maybe this will get you started on the #sub .top and .body?

#sub {
	width : 734px;
	display: block;
}
#sub .top {
width : 734px; 
height : 50px; 
background : url(http://pjx.itconsmedia.com/eacottawa/includes/themes/main/images/bg/bg-subheading.png) no-repeat; 
text-indent : 15px;
}
#sub .top .title {
color : #f1f1f1; 
font-family : Arial, Helvetica, sans-serif; 
font-size : 18px; 
padding-top : 15px;
}
#sub .body { 
width : 734px; margin: -25px 0 0 0;
background : url(http://pjx.itconsmedia.com/eacottawa/includes/themes/main/images/bg/bg-subbody.png) repeat-y; 

}

#sub drops in IE7 so I'm sure it drops in IE6 as well. You may have to sacrifice some widths in #sub to get it to work... or widen #pagewrapper? Maybe float:left; would fix it?

Pretty complicated website and I'm limited to what I can do with the WebDevelopersToolbar in FF, unless I download the site and work on it locally...

[treigh]

Thanx again,

I wasn't even paying attention to IE since I was so focused on Firefox. I reduced the size of my #sub DIV and removed the auto scroller so IE is displaying properly. You can check it out to see how much you helped me. So now I can focus on the core of the job

I appreciate your help and when the site is finally up, I'll update the post so you can check it if you want.

Cheers,
Treigh