Two Column Layout Issue

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ZZ
    #1

    Two Column Layout Issue


    I am having a bugger of a time figuring out why firefox won't
    recognize my faux two-column layout. When the content column
    ("contcol") gets filled in with more content than the "menucol", both
    "expand" properly in IE (it recognizes the background from "page" and
    makes the column look expanded). In forefox (3) it doesn't do it -
    the "menucol" ends with the content and the white box of the "contcol"
    continues by itself. Here is the setup and CSS I am using:

    <div id="page">
    <div id="menucol"></div>
    <div id="contcol"></div>
    </div>


    CSS:

    #page{
    width: 975px;
    background-color: #CECC99;
    }
    #menucol{
    float: left;
    width: 290px;
    background-color: #CECC99;
    padding-top: 10px;
    text-align: center;
    }
    #contcol{
    float: right;
    width: 684px;
    background: #fff;
    border-left: 1px solid #000;
    }

    Any help would be appreciated!

    Thanks ahead;

    Tom

    Tags: None
    • dorayme
      #2
      Re: Two Column Layout Issue

      In article <okl3i49o169rje gdpt95rl2luoqvv 50tht@4ax.com>,
      ZZ <noway@wpenewon .orgwrote:
      I am having a bugger of a time figuring out why firefox won't
      recognize my faux two-column layout. When the content column
      ("contcol") gets filled in with more content than the "menucol", both
      "expand" properly in IE (it recognizes the background from "page" and
      makes the column look expanded). In forefox (3) it doesn't do it -
      the "menucol" ends with the content and the white box of the "contcol"
      continues by itself.
      IE (at least 6) behaves differently to FF in this matter. FF is strictly
      correct. You need to either put overflow: hidden; or overflow: auto; on
      your container or else style a clear into a last element in the
      container. Even going so far as to create an element for this purpose:
      <div style="clear: both"></div>

      You might get something out of:

      <http://netweaver.com.a u/floatHouse/>

      --
      dorayme

        Comment

        • ZZ
          #3
          Re: Two Column Layout Issue

          On Tue, 18 Nov 2008 08:16:46 +1100, dorayme
          <doraymeRidThis @optusnet.com.a uwrote:
          >In article <okl3i49o169rje gdpt95rl2luoqvv 50tht@4ax.com>,
          ZZ <noway@wpenewon .orgwrote:
          >
          >I am having a bugger of a time figuring out why firefox won't
          >recognize my faux two-column layout. When the content column
          >("contcol") gets filled in with more content than the "menucol", both
          >"expand" properly in IE (it recognizes the background from "page" and
          >makes the column look expanded). In forefox (3) it doesn't do it -
          >the "menucol" ends with the content and the white box of the "contcol"
          >continues by itself.
          >
          >IE (at least 6) behaves differently to FF in this matter. FF is strictly
          >correct. You need to either put overflow: hidden; or overflow: auto; on
          >your container or else style a clear into a last element in the
          >container. Even going so far as to create an element for this purpose:
          ><div style="clear: both"></div>
          >
          >You might get something out of:
          >
          ><http://netweaver.com.a u/floatHouse/>
          Thanks, I am looking at it with the newest IE7.

          I did fail to mention that I have a footer div after the container
          with a clear:both in it.

          However, I did user oveflow: hidden, and it worked great to fix the
          issue in FF.

          Thanks for all of your help,

          Tom


            Comment

            • dorayme
              #4
              Re: Two Column Layout Issue

              In article <agk4i4db06m0su ld4n9s2vn2knos3 nnro9@4ax.com>,
              ZZ <noway@wpenewon .orgwrote:
              On Tue, 18 Nov 2008 08:16:46 +1100, dorayme
              <doraymeRidThis @optusnet.com.a uwrote:
              >
              In article <okl3i49o169rje gdpt95rl2luoqvv 50tht@4ax.com>,
              ZZ <noway@wpenewon .orgwrote:
              I am having a bugger of a time figuring out why firefox won't
              recognize my faux two-column layout. When the content column
              ("contcol") gets filled in with more content than the "menucol", both
              "expand" properly in IE (it recognizes the background from "page" and
              makes the column look expanded). In forefox (3) it doesn't do it -
              the "menucol" ends with the content and the white box of the "contcol"
              continues by itself.
              IE (at least 6) behaves differently to FF in this matter. FF is strictly
              correct. You need to either put overflow: hidden; or overflow: auto; on
              your container or else style a clear into a last element in the
              container. Even going so far as to create an element for this purpose:
              <div style="clear: both"></div>

              You might get something out of:

              <http://netweaver.com.a u/floatHouse/>
              >
              Thanks, I am looking at it with the newest IE7.
              >
              It is not really advisable, see the preamble! But at least it is better
              than reading it with IE 6. <g>
              I did fail to mention that I have a footer div after the container
              with a clear:both in it.
              >
              That will not work. The clearing element, if it is to make the container
              grow height, must be in the container itself and generally be the last
              thing before the container says goodnight.
              However, I did user oveflow: hidden, and it worked great to fix the
              issue in FF.
              >
              And many other modern browsers too.

              --
              dorayme

                Comment

                • ZZ
                  #5
                  Re: Two Column Layout Issue

                  On Wed, 19 Nov 2008 06:11:47 +1100, dorayme
                  <doraymeRidThis @optusnet.com.a uwrote:
                  >In article <agk4i4db06m0su ld4n9s2vn2knos3 nnro9@4ax.com>,
                  ZZ <noway@wpenewon .orgwrote:
                  >
                  >On Tue, 18 Nov 2008 08:16:46 +1100, dorayme
                  ><doraymeRidThi s@optusnet.com. auwrote:
                  >>
                  >In article <okl3i49o169rje gdpt95rl2luoqvv 50tht@4ax.com>,
                  ZZ <noway@wpenewon .orgwrote:
                  >
                  >I am having a bugger of a time figuring out why firefox won't
                  >recognize my faux two-column layout. When the content column
                  >("contcol") gets filled in with more content than the "menucol", both
                  >"expand" properly in IE (it recognizes the background from "page" and
                  >makes the column look expanded). In forefox (3) it doesn't do it -
                  >the "menucol" ends with the content and the white box of the "contcol"
                  >continues by itself.
                  >
                  >IE (at least 6) behaves differently to FF in this matter. FF is strictly
                  >correct. You need to either put overflow: hidden; or overflow: auto; on
                  >your container or else style a clear into a last element in the
                  >container. Even going so far as to create an element for this purpose:
                  ><div style="clear: both"></div>
                  >
                  >You might get something out of:
                  >
                  ><http://netweaver.com.a u/floatHouse/>
                  >>
                  >Thanks, I am looking at it with the newest IE7.
                  >>
                  >
                  >It is not really advisable, see the preamble! But at least it is better
                  >than reading it with IE 6. <g>
                  >
                  >I did fail to mention that I have a footer div after the container
                  >with a clear:both in it.
                  >>
                  >
                  >That will not work. The clearing element, if it is to make the container
                  >grow height, must be in the container itself and generally be the last
                  >thing before the container says goodnight.
                  >
                  >However, I did user oveflow: hidden, and it worked great to fix the
                  >issue in FF.
                  >>
                  >And many other modern browsers too.


                  And just to follow-up for anyone else who encounters this - having
                  your doctype at the top of your page is important for the browser.

                  Thanks again for your help,

                  Tom

                    Comment

                    • Bergamot
                      #6
                      Re: Two Column Layout Issue


                      ZZ wrote:
                      >
                      And just to follow-up for anyone else who encounters this - having
                      your doctype at the top of your page is important for the browser.
                      It's not just the DOCTYPE, but which DOCTYPE. They are not all created equally.

                      --
                      Berg

                        Comment

                        Previous template Next
                        Working...