PDA

View Full Version : Height Problem with CSS


tux
03-29-2008, 01:26 AM
I have rebuilt a site with CSS with some great help from Cary. All was okay but I have just noticed that when the content extends and creates scroll bars the detail on the right does not extend to the bottom of the page. Also, I have a copyright statement that does not stay at the bottom.

Here are the links to a test page (http://www.photographybydantucker.com/gallery2_backup.php) and the CSS file (http://www.photographybydantucker.com/PbyDt.css).

Any advice as to why this happens would be great. Many thanks.

Regards, Paul

Cary
03-29-2008, 05:17 AM
Looks like the content div isn't going to the bottom of the page because you have floated elements which need to be cleared.

In the code below I added a clearing div just before the end of the content div.

<div id="content">
<div id="title">
<h2><img src="Images/Titles/gallery_landarch.gif" alt="Home" width="400" height="32"></h2>
</div>
<div id="gal_holder">
<div class="img_left2">
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/Thumbs/DTLAND0164.jpg" alt="Burrow Mump &minus; Somerset (GB)" ></a></div>
</div>
<div class="img_right2">
<p><span class="blue_bold">Description:</span> Burrow Mump &minus; Somerset (GB)</p>
<div class="img2big"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/DTLAND0061.jpg" alt="Burrow Mump &minus; Somerset (GB)" ></a></div>
</div>
<div class="img_left2">
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/Thumbs/DTLAND0164.jpg" alt="Watendlath &minus; Lake District (GB)" ></a></div>
</div>
<div class="img_left2">
<div class="img1"><a target="_blank" href="http://www.photographybydantucker.com/gallery_main1.php"><img src="images/Gallery/Thumbs/DTLAND0164.jpg" alt="Hillside Farm &minus; Lake District (GB)" ></a></div>
</div>
</div>
<div class="clearing"></div>
</div>

I also added "height:auto" back into the #wrapper styling and created a rule for the .clearing class.

#wrapper {
position: relative;
min-height: 100%; /* IE 6 doesn't understand "min-height" */
height:auto;
background: url(Images/rgt_dtl.gif) repeat-y right top;
min-width: 720px;
}
.clearing {
font-size: 0px;
line-height: 0px;
clear: both;
height: 0px;
}

Oh, don't forget to remove the blank line above your doctype. I think even a blank line can throw IE into quirks mode.

tux
03-29-2008, 09:38 AM
Thanks Cary,

You have helped my such a lot, I really appreciate it. I seem to struggle a bit with floats and clearings. Do you know any good tuts or articles on them.

Thanks again mate.

Regards, Paul.

domedia
03-29-2008, 05:21 PM
I stopped using clearing divs one I realized that a container with floated elements on needed height: 1% and overflow: hidden to work

Cary
03-29-2008, 07:07 PM
I seem to struggle a bit with floats and clearings. Do you know any good tuts or articles on them.

I really like the book "CSS Mastery" by Andy Budd, Cameron Moll and Simon Collison, but I'm more of a book person.

I stopped using clearing divs one I realized that a container with floated elements on needed height: 1% and overflow: hidden to work

Using Domedia's advice you can remove the unsemantic clearing div and use this styling:

#content {
margin: 0 37px 0 150px;
clear: both;
background: #FFFFFF url(Images/titlebar.gif) repeat-x left top;
height: 1%;
}
#gal_holder {
width: 620px;
margin: 25px auto 0px auto;
min-height: 90px;
overflow: hidden;
}

I tried putting the overflow:hidden and height:1% on the same element which worked fine in Opera and Firefox, but it caused a rendering problem in IE6 in this instance.

domedia
03-29-2008, 07:25 PM
the height and overflow property has to go into the same containing div gal_holder

Cary
03-29-2008, 07:51 PM
I tried that, but couldn't see how to solve the rendering problem it creates in IE6.