PDA

View Full Version : DIV fixed to it's minimum height in Firefox



treigh
01-01-2008, 09:12 PM
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:

My main content DIV is fixed to it's minimum height and not expanding to fit the content.
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
01-01-2008, 09:38 PM
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 (http://www.quirksmode.org/css/clearing.html)

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
01-01-2008, 10:29 PM
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
01-01-2008, 11:18 PM
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
01-01-2008, 11:51 PM
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