CSS Forum

**alockrem** · 03-11-2010, 10:18 PM

I have read quite a few explanations of how to use a clearer div, but it's not working for me. Please see the code below and let me know what I'm doing wrong.

[in the stylesheet]
.Clearer {
clear: left;
line-height: 0;
height: 0;}

[in the html of the page]
<div class="Clearer"> </div>

In Firefox 3 it works as expected. In IE 6 it displays a break in between the divs as if the height is being ignored. Without the clearer divs it works fine in IE 6, but Firefox 3 doesn't properly load the background images.

The pages are not currently posted online or I would include a link. Please let me know if you need more details.

Any help is appreciated.

**Reckoner** · 03-11-2010, 10:36 PM

Can you provide a URL? Are you trying to clear a floated div?

The important thing about any div that is FLOATED is that after you are done floating them, you have to be sure CLEAR them left and right.

Example of how it looks in the CSS.
.clearer {clear:both}

http://www.w3schools.com/css/pr_class_float.asp

**alockrem** · 01:52 PM

Thank you for the quick reply. I can't post a URL because it's currently just hosted on my PC. I am uploading more of the source to help you see what is happening.

------------

Code:

.HeaderWrapper {
    background-image: url(/Images/OutsideBG.jpg);
    background-repeat: repeat;
    width: 100%;}
    
    .Header {
        margin: 0px auto;
        width: 996px;}
        
        .HeaderLeftShadow {
            float: left;
            width: 8px;
            height: 60px;
            background: url(/Images/LeftEdgeShadowBg.jpg);
            background-repeat: repeat-y;}
        
        .HeaderContents {
            float: left;
            width: 980px;
            height: 60px;
            background: #FFFFFF url(/Images/HeaderBg.jpg);
            background-repeat: no-repeat;
            background-position: right top;
            margin: 0px auto;}
            
            .Logo {
                position: relative;
                float: left;
                left: 4px;
                top: 8px;}
                
            .HeaderTopRight {
                float: right;
                padding: 0 4px 0 0;
                font-size: 16px;}
                
            .HeaderBottomRight {
                clear: right;
                float: right;
                position: relative;
                top: 6px;
                left: -2px;}
            
        .HeaderRightShadow {
            float: left;
            width: 8px;
            height: 60px;
            background: url(/Images/RightEdgeShadowBg.jpg);
            background-repeat: repeat-y;}

------------

HTML Code:

    <div class="HeaderWrapper">
        <div class="Header">
            <div class="HeaderLeftShadow">
                
                <asp:Image
                    ID="imgHeaderLeftShadowPixel"
                    runat="server"
                    ImageUrl="~/Images/Pixel.gif" />
                    
            </div>
            
            <div class="HeaderContents">
                <div class="Logo">
                    <asp:Image
                        ID="imgLogo"
                        runat="server"
                        ImageUrl="~/Images/Logo.jpg" />
                </div>
                
                <div class="HeaderTopRight">
                    <a href='#'>Link(s)</a>
                </div>
                
                <div class="HeaderBottomRight">
                    <!-- empty -->
                </div>
            </div>

            <div class="HeaderRightShadow">
                
                <asp:Image
                    ID="imgHeaderRightShadowPixel"
                    runat="server"
                    ImageUrl="~/Images/Pixel.gif" />
                    
            </div>
            
            <div class="Clearer">&nbsp;</div>
        
        </div>
        
        <div class="Clearer">&nbsp;</div>
    
    </div>

----------

Thank you again.

**BrianJM** · 03-12-2010, 12:31 PM

Quote:

Originally Posted by alockrem

Thank you for the quick reply. I can't post a URL because it's currently just hosted on my PC.

Well open up the firewall! It's much easier to help with a link.

**alockrem** · 03-12-2010, 01:05 PM

I posted it online at http://community.freemathtest.com/.

Thank you for any help you can provide.

**LadynRed** · 03:46 PM

First of all, the method of using a non-semantic div just to clear a float is old - and generally unnecessary, there are other methods that don't require adding extraneous markup to your page. The problem you are experiencing in IE6 is just one reason why this extra clearing div is not a good solution.

The easier way to fix this is to add overflow: auto; to #Contents and that will clear the floats inside it. The other method is to float #Contents too and that will automatically clear. I have to say, you're going the long, hard road in your method of putting that drop shadow in there on the box. Make a horizontal background image for the container that includes the shadows and repeat it vertically (repeat-y) and get rid of all those extra divs just to make a shadow

**alockrem** · 03-12-2010, 03:52 PM

Thank you for your help. My goal is not to go the long, hard road toward this solution. If you have an example of how to make it easier I would greatly appreciate it.

I don't have a #Contents defined in my stylesheet, so I attempted to apply your response as close as possible. When I did that it began working perfectly on IE, but now it looks much worse on Firefox.

Please tell me what I misunderstood. Thanks again for your help.

**LadynRed** · 04:41 PM

Sorry, it was a CLASS of .Contents.. my bad.

For the shadow, you can see an example of how it's done here:
http://www.monarchwomenscancercenter.com/

View the code, and grab Firebug (for Firefox) to see the CSS.

I'll take a look at your new code. I would suggest that you put your nav into a proper UL, and give the UL a height.

Ok, try this:

Quote:

body {
margin: 0px;
background: #FF0000;
font-family: Arial, Tahoma, Verdana;}

#wrapper{
position:relative;
width: 996px;
margin: 0 auto;
}

.HeaderWrapper {
background-image: url(OutsideBG.jpg);

width: 100%;
}

.Header {
margin: 0px auto;
width: 996px;
overflow: auto;

}

.HeaderLeftShadow {
float: left;
width: 8px;
height: 60px;
background: url(/Images/LeftEdgeShadowBg.jpg);
background-repeat: repeat-y;}

.HeaderContents {
float: left;
width: 980px;
height: 60px;
background: #FFFFFF url(HeaderBg.jpg);
background-repeat: no-repeat;
background-position: right top;
margin: 0px auto;

}

.Logo {
position: relative;
float: left;
left: 4px;
top: 8px;}

.HeaderTopRight {
float: right;
padding: 0 4px 0 0;
font-size: 16px;}

.HeaderBottomRight {
clear: right;
float: right;
position: relative;
top: 6px;
left: -2px;}

.HeaderRightShadow {
float: left;
width: 8px;
height: 60px;
background: url(/Images/RightEdgeShadowBg.jpg);
background-repeat: repeat-y;}

.MenuWrapper {
background: url(/Images/OutsideMenuBG.jpg);
background-repeat: repeat;}

.Menu {
background: url(MenuBg.jpg) repeat-x;
/* background-repeat: repeat;*/
/* width: 996px;*/
margin: 0px auto;
overflow: auto;

}

.MenuLeftShadow {
float: left;
width: 8px;
height: 40px;
background: url(/Images/LeftEdgeMenuShadowBg.jpg) repeat-y;
}

.MenuContents {
float: left;
width: 970px;
padding: 0px 0 0 10px;
overflow: auto;}

.MenuContents a {
color: #FFF0F0;
font-size: 1em;
text-decoration: none;
padding: 0 25px;}

.MenuContents a:hover {
color: #FFFF99;}

.MenuRightShadow {
float: left;
width: 8px;
height: 40px;
background: url(/Images/RightEdgeMenuShadowBg.jpg) repeat-y;
}

.MenuContents ul#menu{
margin: 0;
padding: 0;
list-style: none;
height: 2em;

}
#menu li{
display: inline;
margin: 0;
padding: 0;
}

#menu li a{
font-weight: bold;
margin: 0;
line-height: 2em;
}

.ContentsWrapper {
background: url(OutsideBG.jpg);
/* background-repeat: repeat;*/
border-bottom: 1px #606060 solid;

}

.Contents {
margin: 0px auto;
width: 996px;
overflow: auto;
}

.ContentsLeftShadow {
float: left;
width: 8px;
height: 600px;
background: url(/Images/LeftEdgeShadowBg.jpg);
background-repeat: repeat-y;}

.ContentsBody {
float: left;
width: 980px;
height: 600px;
background: #FFFFFF;
background-repeat: no-repeat;
background-position: right top;
margin: 0px auto;}

.ContentsRightShadow {
float: left;
width: 8px;
height: 600px;
background: url(/Images/RightEdgeShadowBg.jpg);
background-repeat: repeat-y;}

a {
color: #CC0000;}

HTML (w/o the shadows)

Quote:

<div id="wrapper">
<div class="HeaderWrapper">
<div class="Header">
<div class="HeaderLeftShadow">

<img id="imgHeaderLeftShadowPixel" src="community.freemathtest.com_files/Pixel.gif" style="border-width: 0px;">

</div>

<div class="HeaderContents">
<div class="Logo">
<img id="imgLogo" src="community.freemathtest.com_files/Logo.jpg" style="border-width: 0px;">
</div>

<div class="HeaderTopRight">
<a href="#">Link(s)</a>
</div>

<div class="HeaderBottomRight">

</div>
</div>

<div class="HeaderRightShadow">

<img id="imgHeaderRightShadowPixel" src="community.freemathtest.com_files/Pixel.gif" style="border-width: 0px;">

</div>

</div>

</div>

<div class="MenuWrapper">
<div class="Menu">



<div class="MenuContents">
<ul id="menu">

<li><a href="#">Quick Feedback</a></li>
<li><a href="#">Current Discussions</a></li>
</ul>
</div>



</div>

</div>

<div class="ContentsWrapper">
<div class="Contents">


<div class="ContentsBody">

test...

</div>



</div>

</div>
</div>

**alockrem** · 03-12-2010, 08:53 PM

Thank you very much. I still had a few bugs after attempting to apply the code you provided, but the link you provided gave me enough ideas to greatly simplify what I was doing.

Note: The updated code has not been posted online yet. I will probably upload the code, with some actual functionality within the next week or two.

Thank you again for all of your help.