CSS Forum

**neniluap** · 08:03 AM

Hi,
I am unable to get the background-color in one of my divs (#h3) to show up in Firefox. I've tried adding "overflow:auto" but what ends up happening is div h3 no longer lines up below my other divs. I'm working with FF 2.0. Could anyone help?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <title>margin</title>
                <style type="text/css">
                        #head {width:550px; height:175px;}

                        #h1 {float:right; border:3px 0px 9px 0px;}

                        #h2{width:550px; height: 100px;}

                        #h3 {
                                background-color:purple;
                                font-family:Helvetica;
                                font-size:18px; line-height:26px;
                                font-weight:bold;
                                width:550px;
                                height:40px;
                        }

                        #h3 span.date {
                                float:right;
                                display:table-cell;
                                vertical-align:middle;
                                background-color:purple;
                                color:#FFFFFF;
                                padding-right:20px;
                        }
                </style>
        </head>
        <body>
           <!-- begin CONTAINER, holds all divs -->
           <div id="container">
                        <!-- begin HEAD -->
                        <div id="head">
                                <div id="h1">
                                        <a href="#"><img src="http://www.webmaster-talk.com/images/header1.jpg" border="0" width="323" height="40" align="right" /></a>
                                </div>
                                <div id="h2">
                                        <img src="http://www.webmaster-talk.com/images/header2.jpg" width="550" height="100" align="left" />
                                </div>
                                <div id="h3">
                                        <span class="date">February 5, 2010</span>
                                </div>
                        </div>
                        <div class="clear"></div>
                        <!-- end HEAD -->
                </div>
        </body>
</html>

**chrishirst** · 02-07-2010, 08:07 AM

Use HEADING elements (h1 .. h6) for what they are MEANT NOT styled divs.

**neniluap** · 02-07-2010, 03:00 PM

Understood. It was header1, header2, header3. I abbreviated it here for brevity.