CSS Forum

**JeremyMiller** · 01-04-2008, 02:21 PM

I keep running across a layout that throws me for a loop and my CSS blows up into a gigantic mess. I've created a minimal example to generate the problem and am hoping some of the CSS gurus in here can set my head back on straight.

Here's the code:

HTML 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>
    <title>Test</title>
    <style>
      body {
        background-color:#000000;
      }
      #inner_body {
        width:80%;
        margin-left:auto;
        margin-right:auto;
        background-color:#ff0000;
      }
      #navigation {
        width:100%;
      }
      #page_body {
        width:100%;
      }
      #left_column {
        float:left;
        width:24.9%;
        background-color:#00ff00;
      }
      #right_column {
        float:left;
        width:75%;
        background-color:#0000ff;
      }
    </style>
  </head>
  <body>
    <div id="inner_body">
      <div id="navigation">
        <a href="#1">Option 1</a>
        <a href="#2">Option 2</a>
        <a href="#3">Option 3</a>
        <a href="#4">Option 4</a>
        <a href="#5">Option 5</a>
      </div>
      <div id="page_body">
        <div id="left_column">
          <h2>Left Options</h2>
          <p>This is where sub-navigation is placed for the primary navigation's objects.</p>
        </div>
        <div id="right_column">
          <h1>Main Content Area</h1>
          <p>Main content area.</p>
        </div>
      </div>
    </div>
  </body>
</html>

Now, on IE 7 (don't know or care about IE 6) the red background of the inner_body DIV extends to include left_column and right_column. In FireFox it doesn't. What is it that I'm missing (or have added) which is causing this ? To fix it, I usually start floating things around, adding in margin, and when it's done I have way too much code for such a "simple" problem. (I'd provide an example, but they're integrated with other complicated stylesheets and I wouldn't be able to easily generate such a mess.)

Thanks in advance!

**LadynRed** · 01-04-2008, 08:58 PM

Clear your floats that should fix it.

**JeremyMiller** · 01-04-2008, 09:10 PM

Quote:

Originally Posted by LadynRed

Clear your floats that should fix it.

Thanks. Changed it to

HTML 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>
    <title>Test</title>
    <style>
      body {
        background-color:#000000;
      }
      #inner_body {
        width:80%;
        margin-left:auto;
        margin-right:auto;
        background-color:#ff0000;
      }
      #navigation {
        width:100%;
      }
      #page_body {
        width:100%;
      }
      #left_column {
        clear:left;
        float:left;
        width:24.9%;
        background-color:#00ff00;
      }
      #right_column {
        clear:right;
        float:left;
        width:75%;
        background-color:#0000ff;
      }
    </style>
  </head>
  <body>
    <div id="inner_body">
      <div id="navigation">
        <a href="#1">Option 1</a>
        <a href="#2">Option 2</a>
        <a href="#3">Option 3</a>
        <a href="#4">Option 4</a>
        <a href="#5">Option 5</a>
      </div>
      <div id="page_body">
        <div id="left_column">
          <h2>Left Options</h2>
          <p>This is where sub-navigation is placed for the primary navigation's objects.</p>
        </div>
        <div id="right_column">
          <h1>Main Content Area</h1>
          <p>Main content area.</p>
        </div>
      </div>
    </div>
  </body>
</html>

And the problem remains, though.

**LadynRed** · 01-04-2008, 09:17 PM

Yeah, well, putting a clear on the element you're floating isn't effective.

http://css-discuss.incutio.com/?page=ClearingSpace

**JeremyMiller** · 09:35 PM

Thanks!

For those others interested, here is the solution:

HTML 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>
    <title>Test</title>
    <style>
      body {
        background-color:#000000;
      }
      #inner_body {
        width:80%;
        margin-left:auto;
        margin-right:auto;
        background-color:#ff0000;
        overflow:auto;
      }
      #navigation {
        width:100%;
      }
      #page_body {
        width:100%;
      }
      #left_column {
        float:left;
        width:24.9%;
        background-color:#00ff00;
      }
      #right_column {
        float:left;
        width:75%;
        background-color:#0000ff;
      }
    </style>
  </head>
  <body>
    <div id="inner_body">
      <div id="navigation">
        <a href="#1">Option 1</a>
        <a href="#2">Option 2</a>
        <a href="#3">Option 3</a>
        <a href="#4">Option 4</a>
        <a href="#5">Option 5</a>
      </div>
      <div id="page_body">
        <div id="left_column">
          <h2>Left Options</h2>
          <p>This is where sub-navigation is placed for the primary navigation's objects.</p>
        </div>
        <div id="right_column">
          <h1>Main Content Area</h1>
          <p>Main content area.</p>
        </div>
      </div>
    </div>
  </body>
</html>

Also, this works

HTML 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>
    <title>Test</title>
    <style>
      body {
        background-color:#000000;
      }
      #inner_body {
        float:left;
        width:80%;
        margin-left:10%;
        margin-right:10%;
        background-color:#ff0000;

      }
      #navigation {
        width:100%;
      }
      #page_body {
        width:100%;
        float:left;
      }
      #left_column {
        float:left;
        width:24.9%;
        background-color:#00ff00;
      }
      #right_column {
        float:left;
        width:75%;
        background-color:#0000ff;
      }
    </style>
  </head>
  <body>
    <div id="inner_body">
      <div id="navigation">
        <a href="#1">Option 1</a>
        <a href="#2">Option 2</a>
        <a href="#3">Option 3</a>
        <a href="#4">Option 4</a>
        <a href="#5">Option 5</a>
      </div>
      <div id="page_body">
        <div id="left_column">
          <h2>Left Options</h2>
          <p>This is where sub-navigation is placed for the primary navigation's objects.</p>
        </div>
        <div id="right_column">
          <h1>Main Content Area</h1>
          <p>Main content area.</p>
        </div>
      </div>
    </div>
  </body>
</html>

**OSWebMaster** · 01-05-2008, 02:30 PM

Hello Jeremy & Lady -

I pasted your original code into an html doc and saw that the red background did not extend down to the bottom of the content area, which is what I believe you were after (first screenshot below). Then I checked that against your first solution and noted that you solved it using "overflow" in the #inner_body div (highlighted in second screenshot below).

My question for the Lady is where would you have used the clear you recommended -- in a new div?

REFERENCES: To display CSS code next to the screenshots I am using the excellent Web Developer extension for Firefox which allows you to try different solutions by typing them into the CSS code and then see an immediate result onscreen. There is also a good article on Clearing Floats here.

Illustration 1 - The original code screenshot:

Illustration 2 - Red area extends at bottom, and solution (overflow) highlighted in the code.

**LadynRed** · 07:28 PM

Quote:

My question for the Lady is where would you have used the clear you recommended -- in a new div?

I use a <br> for my clearing element, which adds no structural markup.

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

In the html it's just <br class="brclear" /> . In the example given, I'd put in the clearing <br> following the close of the right column, like this:

Quote:

<!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>
<title>Test</title>
<style>
body {
background-color:#000000;
}
#inner_body {
width:80%;
margin-left:auto;
margin-right:auto;
background-color:#ff0000;

}
#navigation {
width:100%;
}
#page_body {
width:100%;
}
#left_column {
float:left;
width:24.9%;
background-color:#00ff00;
}
#right_column {
float:left;
width:75%;
background-color:#0000ff;
}
.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
</style>
</head>
<body>
<div id="inner_body">
<div id="navigation">
<a href="#1">Option 1</a>
<a href="#2">Option 2</a>
<a href="#3">Option 3</a>
<a href="#4">Option 4</a>
<a href="#5">Option 5</a>
</div>
<div id="page_body">
<div id="left_column">
<h2>Left Options</h2>
<p>This is where sub-navigation is placed for the primary navigation's objects.</p>
</div>
<div id="right_column">
<h1>Main Content Area</h1>
<p>Main content area.</p>
</div>
<br class="brclear" />
</div>
</div>
</body>
</html>

**OSWebMaster** · 01-05-2008, 07:30 PM

Hi Lady -

Hey... nice trick. I had not used it before.

Thanks -
Scott

**LadynRed** · 01-05-2008, 07:50 PM

Always works for me

I can't take credit for it though, I think I got it from CMX.