CSS Forum

**pealo86** · 03-15-2009, 05:03 PM

I have the div class 'currentProject' with a background colour applied to it and some floated content inside. For some reason the content in IE just overflows out of the div as it doesn't extent to fit whatever is inside it.

It's as if the div is just stuck at a 30px or so height in IE. I've added a clearing line break before the end of the div but it hasn't fixed it for IE!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/default.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<link href="css/styleDef.css" rel="stylesheet" type="text/css" />
<link href="css/styleDivId.css" rel="stylesheet" type="text/css" />
<link href="css/styleDivClass.css" rel="stylesheet" type="text/css" />
<link href="css/styleFrm.css" rel="stylesheet" type="text/css" />
<link href="css/styleUl.css" rel="stylesheet" type="text/css" />
<link href="css/styleCoolText.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="head">
  <div id="headInner">
    <ul id="nav">
     <li>
     <a id="navContact" href="#"><img src="image/bgHover.jpg" /><b>contact</b></a></li>
     <li><a id="navService" href="#"><img src="image/bgHover.jpg" /><b>service</b></a></li>
     <li><a id="navAbout" href="about.htm"><img src="image/bgHover.jpg" /><b>about</b></a></li>
     <li><a id="navHome" href="../"><img src="image/bgHover.jpg" /><b>home</b></a></li>
    </ul>
    <a href="../"><img src="image/logo.gif" name="logo" width="207" height="28" id="logo" /></a> </div>
</div>
<!-- InstanceBeginEditable name="bgSky" -->
<div id="bgSky"><img src="image/tree.jpg" width="800" height="70" /></div>
<!-- InstanceEndEditable -->
<div id="wrapper">
  <div id="wrapperInner">
    <br class="clear" />
    <div id="content">
    <!-- InstanceBeginEditable name="content" -->
    <div id="colLeft">
      <h1>About Freshbeat</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <h2>Current Projects</h2>
      <div class="borderTop"></div>
      <div class="currentProjectWidth">
        <div class="borderOuter">
          <div class="currentProject borderInner"><img src="image/currentProjectPP.jpg" alt="" width="132" height="187" />
            <div class="content"><span class="title">PenguinPages</span>
              <p>An internet business directory that will allow all users to submit multiple company profiles aswell as containing their website URL for free. The public will be able to rate and contact each company.</p>
              </div>
            <br class="clear" />
            </div>
        </div>
      </div>
      <div class="borderBtm"></div>
<div class="borderTop"></div>
      <div class="currentProjectWidth">
        <div class="borderOuter">
          <div class="currentProject borderInner"><img src="image/currentProjectPP.jpg" alt="" width="132" height="187" />
            <div class="content"><span class="title">The Bottom Line</span>
              <p>A website redesign for an established   Accounting / Bookkeeping agency who are based in Ellesmere Port.</p>
            </div>
            <br class="clear" />
          </div>
        </div>
      </div>
      <div class="borderBtm"></div>
    </div>
    <div id="colRight">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    <br class="clear" />

    <!-- InstanceEndEditable -->
    </div>
    <br class="clear" />
  </div>
</div>
<div id="footer">
  <div id="left"><b>website and graphic design for small businesses by <span class="highlight">freshbeat.co.uk</span><br />
      <span class="highlight">e:</span> contact@freshbeat.co.uk <span class="highlight">| t:</span> 07858013378</b></div>
  <div id="right">
  <ul id="navFooter">
     <li><a href="#">contact</a></li>
     <li><a href="#">service</a></li>
     <li><a href="about.htm">about</a></li>
     <li><a href="../">home</a></li>
    </ul>
  </div>
<br class="clear" />
</div>

</div>
</body>
<!-- InstanceEnd --></html>

Code:

@charset "utf-8";
/* div classes */

.cta, .ctaLast {
    width:230px;
    float:left;
    min-height:200px;
    border-right:#FFf dotted 1px;
    margin-right:15px;
    padding-right:5px; }

.cta p, .ctaLast p {
    margin-top:0; }

.cta img, .ctaLast img {
    position:relative;
    right:3px; }

.ctaLast {
    border-right:none; }

.currentProject {
    background-color:#3c6e0f;
    padding:10px; }

.currentProjectWidth {
    width:440px;
    margin:0 auto; }

.currentProject img {
    float:left;
    margin-right:10px; }

.currentProject .title {
    font-size:120%;
    margin-bottom:.7em;
    display:block; }

.currentProject .content {
    width:250px;
    float:left; }

.borderOuter {
    border:#88C528 solid;
    border-width:0 1px; }

.borderInner {
    border:#003C00 solid;
    border-width:0 1px; }

If anyone could help thatd be great

**LadynRed** · 03-16-2009, 11:03 AM

Quote:

I've added a clearing line break before the end of the div but it hasn't fixed it for IE!

You need to add it AFTER the ending </div>
Better yet, add overflow:auto to that div and you won't need the clearing break.

**pealo86** · 03-16-2009, 07:16 PM

Thanks! I never knew overflow: auto could be used like that, looks like I can use a lot less clearing elements from now on

**LadynRed** · 03-16-2009, 08:56 PM

Yes, it does help that way. There are some minor issues, sometimes you'll get scrollbars when you don't want them, but most of the time it works just fine.