4 Replies Latest reply on Apr 23, 2010 5:59 AM by JoeDaSilva

    2 column fixed behaving as elastic? and image reflowing

    PaulinCyprus

      Apologies if these 2 questions have been asked previously but I couldn't find the answer when I searched the forums today.

       

      I hope someone can help with 2 (probably simple) issues with my web site:

       

      I selected a fixed template when starting dreamweaver that shows correctly in design & live previews:

      dreamweaver.JPG

      but when I view in Mozilla Firefox or Explorer the sidebar aligns to the left of the browser window and the main image flows under the sidebar:

      live view.JPG

      See www.paphospropertysolutions.com to see live & view source code.

       

      I have tried various alignment options in CSS and HTML but no joy. Any ideas?

       

      Many thanks for reading.

       

      Paul

        • 1. Re: 2 column fixed behaving as elastic? and image reflowing
          JoeDaSilva Level 4

          It looks like you commented out all of the CSS, including the structure that centers the site and sets the widths of your columns. Is there a reason you chose to do that?

          • 2. Re: 2 column fixed behaving as elastic? and image reflowing
            John Waller Adobe Community Professional & MVP

            (The HTML comments inside the style tags are fine. They hide the stylesheet from ancient browsers which would otherwise display the CSS rules as plain text in the page)

             

            The CSS in the <head> section of the page is partially working but mostly ignored because it's broken in one spot.

             

            The embedded CSS rule for the <body> tag is broken (incomplete) for the background attributes in red below:

             

            body  {
            font: 100% Verdana, Arial, Helvetica, sans-serif;
            margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
            padding: 0;
            text-align: center; /* this centers the container in IE 5
            browsers. The text is then set to the left aligned default in the #container selector */
            color: #000000;
            margin-left: 0px;
            background: image(;
            background-image: url();
            background-color: #FFF;
            }

             

            Up to the margin-left attribute is read and honoured by the browsers. After that is ignored.

             

            You can see this via View > Source in IE8 where the coding changes color after margin-left.

             

            This is causing the rest of the CSS rules which create the page structure from that point on to be ignored by the browsers.

             

            Either delete or properly complete the background attributes in the rule above.

            1 person found this helpful
            • 3. Re: 2 column fixed behaving as elastic? and image reflowing
              PaulinCyprus Level 1

              Joey/John,

              Many thanks for youir quick replies.

               

              I have removed the code highlighted and page now looks to be working correctly. Many thanks for taking the time to answer.

               

              Have a nice day.

               

              Paul