Layout problem that works in IE but not in Firefox

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • NathanGen
    New Member
    • Apr 2007
    • 1
    #1

    Layout problem that works in IE but not in Firefox

    I have watered down the layout I intend to achieve, which is 2 columns that are dynamic, 33% and 67% of available width, and a third column that is 200 pixels.

    Object not found!
    http://www.cs.lewisu.edu/~ongni/usjournal/redesign/test3.htm


    The structure hold in IE, but totally breaks down in Firefox.

    Thanks in advance for the help.
    Tags: None
    • basstradamus
      New Member
      • Mar 2007
      • 11
      #2
      Hi there

      Try that, it works fine in FF and IE6,7 as well

      .co12 {
      margin-right:200px;
      }

      bye

        Comment

        • jhardman
          Recognized Expert Specialist
          • Jan 2007
          • 3405
          #3
          Originally posted by NathanGen
          I have watered down the layout I intend to achieve, which is 2 columns that are dynamic, 33% and 67% of available width, and a third column that is 200 pixels.

          Object not found!
          http://www.cs.lewisu.edu/~ongni/usjournal/redesign/test3.htm


          The structure hold in IE, but totally breaks down in Firefox.

          Thanks in advance for the help.
          I can't believe that took me so long!
          [html]
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <title>test page</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <style type="text/css">
          #container {
          margin: 0px;
          padding: 0px;
          width: 100%;
          clear: both;

          }

          .co1 {
          width: 33%;


          background-color: #00CCFF;
          }
          .co2 {


          position: absolute;
          top: 0px;
          right: 0px;
          width: 67%;
          background-color: #0066FF;


          }
          .co3 {
          width: 200px;
          position: absolute;
          right: 0px;
          top: 0px;
          background-color: #00FFFF;

          }
          .co12 {
          width: auto;
          position: absolute;
          left: 0px;
          top: 0px;
          margin-right: 200px;
          }

          body {
          color: #333333;
          background-color: #dcebff;
          margin: 0;
          padding: 0px 5px;
          font-size: 0.9em;
          }
          </style>
          </head>
          <body>
          <div id="container" >
          <!---containder Start-->
          <div id="content">


          <div class="co3">
          Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x.
          </div>

          <div class="co12">
          <div class="co1">
          Column 1 33% content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx.
          </div>
          <div class="co2">
          Column 2 67% content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld.
          </div>
          </div>


          </div><!--content end-->
          </div>
          </body>

          </html>

          [/html]

            Comment

            • jhardman
              Recognized Expert Specialist
              • Jan 2007
              • 3405
              #4
              It seriously felt like it took me an hour. It appears that IE incorrectly interprets "float: right;" as "position: absolute; right: opx;". Any way, I just put the 200px div "position: absolute; right: 0px;" and I put the other two divs inside a secondary container div with a right margin of 200px.

              Let me know if it helps.

              Jared

                Comment

                • basstradamus
                  New Member
                  • Mar 2007
                  • 11
                  #5
                  Positioning in your style is unnescessary. I change only class .co12 in the style definition and layout looks how it should look.

                  .co12 {
                  margin-right:200px;
                  }

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      This is incorrect:
                      <style>

                      Should be:
                      <style type="text/css">

                        Comment

                        Previous template Next
                        Working...