Attempting 2 Col Layout in wrapper, wrapper wont expand to float

Lc3 · 12-04-2008, 02:22 PM

Hi, I'm sure I'm not the first one to come accross this but I can't find a solution for it online. Here is a boiled down sample HTML/CSS page of what I'm trying to do:

http://leechristie.com/hotlinks/css-help/example.html <- View the source of this HTML document

I made that simple example rather than post my origonal page, since my origonal page is covered in PHP and would complicate my question.

Here's what the sample page looks like on IE (this is what I'm going for):

But on FireFox the wrapper collapses when the side is longer than the main area:

Since I'll have a black border around my wrapper,that would be noticeable.

Can anyone please tell me what I need to add to my CSS to fix it to display correctly on all browsers? View the source on the HTML document I linked to have a look, thanks.

jerry62704 · 12-04-2008, 02:39 PM

This will do what you want:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>

        * {
            margin: 0px;
            padding: 0px;
            border: 0px;
            text-align: left;
        }

        ul {
            list-style: none;
        }

        body {
            text-align: center;
        }

        #wrapper {
            padding: 20px;
            border: 1px solid black;
            width: 800px;
            margin: 20px auto 20px auto;
        }

        #main {
            padding: 10px;
            border: 1px solid red;
            margin-right: 290px;
        }

        #side {
            padding: 10px;
            float: right;
            width: 250px;
            border: 1px solid blue;
        }
        #clearit {
        	clear:	both;
        }

    </style>
  <title>Example</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="side">
        <ul>
          <li>Big</li>
          <li>Long</li>
          <li>List</li>
          <li>With</li>
          <li>Lots</li>

          <li>And</li>
          <li>Lots</li>
          <li>Of</li>
          <li>Items</li>
        </ul>
      </div>

      <div id="main">
        <p>A little text in the main body here.</p>
      </div>
		<div id="clearit">&nbsp;</div>
    </div>
  </body>
</html>

I cleared the float with another div so the wrapper would also clear it. Works in both FF3 and IE6.

Excavator · 12-04-2008, 04:46 PM

Hello Lc3,
I much prefer another method of clearing, like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <style>

        * {
            margin: 0px;
            padding: 0px;
            border: 0px;
            text-align: left;
        }

        ul {
            list-style: none;
        }

        body {
            text-align: center;
        }

        #wrapper {
            padding: 20px;
            border: 1px solid black;
            width: 800px;
            margin: 20px auto 20px auto;
overflow: auto;
        }

        #main {
            padding: 10px;
            border: 1px solid red;
            margin-right: 290px;
        }

        #side {
            padding: 10px;
            float: right;
            width: 250px;
            border: 1px solid blue;
        }

    </style>
  <title>Example</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="side">

        <ul>
          <li>Big</li>
          <li>Long</li>
          <li>List</li>
          <li>With</li>
          <li>Lots</li>

          <li>And</li>
          <li>Lots</li>
          <li>Of</li>
          <li>Items</li>
        </ul>
      </div>
      <div id="main">

        <p>A little text in the main body here.</p>
      </div>
    </div>
  </body>
</html>

Lc3 · 12-04-2008, 05:57 PM

Lovely. I prefer your way Excavator but thanks jerry62704 too your wayalso works. This problem had me completely lost.