CSS Layout Issue (in Firefox only)... probably simple but its driving me crazy!

**alfandango** · 03-06-2008, 05:28 AM

Hey,
I've been designing a page that has developed a layout problem that occurs in Firefox I presume is down to the CSS coding.
I've included the code below an Heres a link to the site I'm having problems with:
http://www.alexshelley.co.uk/layout_problem/index.htm
Basically the page displays fine in IE but in Firefox the bottom of the page (footer) seems to mix in with the mid (content) section.

Any advice would be awesome

CSS:

Code:

html, body, form, h1, h2, h3, h4, ul, li {
    margin: 0;
    padding: 0;
}

h1 img {
    display: block;
}

img {
    border: 0;
}


body {
    background: #5288ba;
    text-align: center;
    font: 11px arial, sans-serif;
    color: #F4C389;
    padding-bottom: 10px;
}

/** layout **/
#wrapper {
    text-align: left;
    margin: auto;
    width: 749px;
      position: relative;
}

/** header **/
#header {
    background: #909cd5 top right url(../images/header.jpg) no-repeat;
    background-color:#909cd5;
    color:white;
    width: 100%;
    height:309px;
    border-bottom:#FFFFFF inset thin;
}

#logo {
  width: 357px;
  background: top left url(../images/logo.jpg) no-repeat;
  height: 185px;
  text-align: center;
  border-right:#FFFFFF inset thin;
  border-bottom:#FFFFFF inset thin;
}

#navigation {
  width: 357px;
  height: 124px;
  text-align: center;
  border-right:#FFFFFF inset thin;
}

#buttons_left {
    text-align:right;
    width:50%;
    height:124px;
    float:left;
}

#buttons_left ul {
    list-style:none;
    margin:0;
    display: inline;
}

#buttons_right {
    text-align:right;
    width:49%;
    height:124px;
    float:right;
    font-weight:bold;
}

#buttons_right span {
    margin:30px;
}

#buttons_right ul {
    list-style:none;
    margin:0;
    display: inline;
}

#buttons_right li {
    margin-top:12px;
}

#buttons_right a {
    text-decoration:none;
    color:white;
}

#buttons_right a:hover {
    text-decoration:underline;
}

/** content **/
#content {
    background-color:#909cd5;
    color:white;
    width: 100%;
    border-bottom:#FFFFFF inset thin;
}

#content_left {
    text-align:justify;
    width:46%;
    height:100%;
    float:left;
    padding:10px 0px 20px 20px;
}

#content_right {
    text-align:justify;
    width:35%;
    height:100%;
    float:right;
    padding:10px 20px 20px 0px;
}

/** footer **/
#footer {
    background-color:#909cd5;
    color:white;
    width: 100%;
    padding: 10px 0px;
    clear:both;
}

#footer p {
    text-align:center;
}

#footer a {
    text-decoration:none;
    color:white;
}

#footer a:hover {
    text-decoration:underline;
}

#footer ul {
    text-align:center;
    list-style:none;
    margin:0;
}

#footer li {
    list-style:none;
    margin:0;
    display: inline;
}


/** credit **/
#credit {
    color: black;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    margin: 10px 0% 0 0%;
    font-weight: normal;
    color: white;
}

#credit a {
    color: black;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    margin: 10px 0% 0 0%;
    font-weight: normal;
    color: white;
}

MARKUP:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grosvener</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/default.css" />
</head>

<body>

<!-- START WRAPPER -->
    <div id="wrapper">
    
    <!-- START HEAD SECTION -->
        <div id="header">
            <div id="logo">
            </div>
            <div id="navigation">
                <div id="buttons_right">
                    <ul>
                        <li><a href="index.htm"><span>Home</span></a></li>
                        <li><a href="about.htm"><span>About Us</span></a></li>
                        <li><a href="hire.htm"><span>Private Hire</span></a></li>
                        <li><a href="contact.htm"><span>Contact Us</span></a></li>
                    </ul>
                </div>
                <div id="buttons_left">
                    <ul>
                        <li><a href="tours.htm"><img src="images/nav1.jpg" alt="tours &amp; excursions" /></a></li>
                        <li><a href="offers.htm"><img src="images/nav2.jpg" alt="offers" /></a></li>
                    </ul>
                </div>
            </div>
        </div>
    <!-- END HEAD SECTION -->
    
    <!-- START CONTENT SECTION -->
        <div id="content">
            <br />
            <div id="content_left">
                <p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here </p>
                <p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here </p>
            </div>
            <div id="content_right">
                <p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here </p>
            </div>
            <br />
        </div>
    <!-- END CONTENT SECTION -->
    
    
    <!-- START FOOTER SECTION -->
         <div id="footer">
             <ul>
                <li><a href="index.htm">Home</a> | </li>
                <li><a href="about.htm">About Us</a> | </li>
                <li><a href="tours.htm">Tours &amp; Excursions</a> | </li>
                <li><a href="offers.htm">Offers</a> | </li>
                <li><a href="hire.htm">Private Hire</a> | </li>
                <li><a href="contact.htm">Contact Us</a></li>
            </ul>
            
            <p>copyright ©</p>
         </div>
    <!-- END FOOTER SECTION -->

    <!-- START CREDIT -->
    <div id="credit">
        <p>website by <a href="http://www.xxx.co.uk">xxx</a></p>
    </div>
    <!-- END CREDIT -->

    </div>
<!-- END WRAPPER -->

</body>
</html>

**chrishirst** · 03-06-2008, 06:03 AM

Add a clearing element inside "content"

because "content" has only two floated elements inside it, it takes up no space in the document flow

**alfandango** · 06:13 AM

No joy I'm afraid. Adding "clear" to the content does nothing. It does however do the following if I add it to the footer... Any ideas why the background colour won't display?:

**chrishirst** · 03-06-2008, 07:01 AM

Quote:

Adding "clear" to the content does nothing.

Correct! it will do nothing at all

However, If you

Quote:

Add a clearing element inside "content"

to "clear" the floats of "content_left" & "content_right" it will make a difference.

**chrishirst** · 03-06-2008, 07:04 AM

Quote:

Any ideas why the background colour won't display?:

If this is the background colour of content it's ;

Quote:

because "content" has only two floated elements inside it, it takes up no space in the document flow

**LadynRed** · 03-06-2008, 02:14 PM

When you float elements, you must CLEAR the floats - read more here:
http://css-discuss.incutio.com/?page=ClearingSpace