8 Replies Latest reply on Feb 9, 2012 6:05 AM by osgood_

    Question with regard to positioning (differences between design mode and live view)

    mikemendo

      I'm not sure how to even search to see if this has been asked, nor how to properly ask the question... but here goes...

       

      I have a div id "container" that is constrained at 968px wide.  Inside that I want to have 2 columns (one containing nothing more than a background picture) next to each other.

       

      I have called one left_column and the other right_column.

       

      The background picture will be in the left column and is 550px high by 290px wide. 

       

      I've used CSS to set the following:

       

      #left_column {

      background-color: #FFF;

      background-image: url(../images/waterfall.jpg);

      background-repeat: no-repeat;

      position: relative;

      height: 550px;

      width: 290px;

      margin-right:10px;

      float:left;

      }

      #right_column {

      height:550px;

      width:650px;

      margin-left:10px;

      padding-left:12px;

      position: relative;

      left: 10px;

      }

       

      In 'design view' everything looks wonderful.  When I go to live view (and/or browserlab) the text in the right column shows that the usable space is only about 300px.

       

      If I change the width in the right_column to 'auto' then in live view (and/or browserlab) everything looks just like I want it, but in design view the width of right_column is closer to 900px and goes WAY out of the container (making it very difficult to see the text while I type).

       

      Any idea what I messed up?  What other details do you need?

       

      Thanks in advance.

        • 1. Re: Question with regard to positioning (differences between design mode and live view)
          MurraySummers Level 8

          For one thing you can't float *and* position, or at least there's no reason to do that.  So you can remove the position style altogether.  The next thing is that you do not want to assign a height to any container that is going to contain text.  So in fact you can remove that height from both column rules too.  So, start with this CSS, and really only pay attention to Live view or preview in browser -

           

          #left_column {

          background-color: #FFF;

          background-image: url(../images/waterfall.jpg);

          background-repeat: no-repeat;

          width: 290px;

          margin-right:10px;

          float:left;

          }

          #right_column {

          width:650px;

          margin-left:10px;

          padding-left:12px;

          left: 10px;

          }

           

          Now what?

          • 2. Re: Question with regard to positioning (differences between design mode and live view)
            osgood_ Level 8

            Murray *ACP* wrote:

             

            For one thing you can't float *and* position, or at least there's no reason to do that.  So you can remove the position style altogether.  The next thing is that you do not want to assign a height to any container that is going to contain text.  So in fact you can remove that height from both column rules too.  So, start with this CSS, and really only pay attention to Live view or preview in browser -

             

            #left_column {

            background-color: #FFF;

            background-image: url(../images/waterfall.jpg);

            background-repeat: no-repeat;

            width: 290px;

            margin-right:10px;

            float:left;

            }

            #right_column {

            width:650px;

            margin-left:10px;

            padding-left:12px;

            left: 10px;

            }

             

            Now what?

             

            968px...those maths dont work out. What's with the left: 10px? (late night?) Get rid of that and margin-left: 10px; then at least there is 6px to spare.

             

             

            #left_column {

            background-color: #FFF;

            background-image: url(../images/waterfall.jpg);

            background-repeat: no-repeat;

            width: 290px;

            margin-right:10px;

            float:left;

            }

            #right_column {

            width:650px;

            padding-left:12px;

            }

            • 3. Re: Question with regard to positioning (differences between design mode and live view)
              mikemendo Level 1

              Thankyou both.

               

              I guess there is some additional inforation I need to give.

               

              I have a total of 4 'areas' in the container, a banner, left column, right column and a footer.

               

              I wanted the left and right columns to be the same height so the footer wouldn't look like it was 'floating' lower on one side than the other.  The width is controlled by the banner image 968px.

               

              In the left column the pictures is a background image, so if I dont set the height and width then the picture isn't sized appropriately.  The reason I did a back ground image was to take the advice of David Powers in his article on 'your very first website' (actually series, I haven't used dreamweaver since 2004, I needed a refresher).

               

              The problems might go away if I insert the picture with an <img> tag, but i'm not sure why it isn't working as a background (this is as much for my knowledge as to fix the current problem).

               

              Thank you again!!

              • 4. Re: Question with regard to positioning (differences between design mode and live view)
                MurraySummers Level 8

                The best way to do this is to make it LOOK like it worked - google "faux columns".

                • 5. Re: Question with regard to positioning (differences between design mode and live view)
                  mikemendo Level 1

                  Thank you!!

                   

                  Any idea why design view and live view would look so different?  Is it just a limitation of design view?

                  • 6. Re: Question with regard to positioning (differences between design mode and live view)
                    osgood_ Level 8

                    mikemendo wrote:

                     

                     

                    I wanted the left and right columns to be the same height so the footer wouldn't look like it was 'floating' lower on one side than the other.  The width is controlled by the banner image 968px.

                     

                     

                    Google 'Faux' columns. This is a technique that requires a background image set on the 'container' <div>. The image repeats itself behind the 'right column <div> to fill the depth and give the impression that both columns are equal height.

                     

                     

                    mikemendo wrote:

                     

                    In the left column the pictures is a background image, so if I dont set the height and width then the picture isn't sized appropriately.  The reason I did a back ground image was to take the advice of David Powers in his article on 'your very first website'

                     

                    That technique is alright to use.

                     

                     

                    At the moment the total width of all your elements adds up to 982px which is wider that your container set at 968px. Margin and padding ARE added to the overall width of a 'container' so:

                     

                    290px + 10px =300px

                    650px + 10px + 12px + 10px = 682px

                     

                    TOTAL = 982px

                     

                    You need to adjust the maths so the total width does not exceed your 'container' width.

                     

                    Use this css and everything should work:

                     

                    #container {

                    overflow: hidden;

                    margin: 0 auto;

                    width: 968px;

                    background-image: url(../images/rightColBg.gif)

                    background-repeat: repeat-y;

                    }

                     

                    #left_column {

                    background-color: #FFF;

                    background-image: url(../images/waterfall.jpg);

                    background-repeat: no-repeat;

                    width: 290px;

                    margin-right:10px;

                    float:left;

                    }

                    #right_column {

                    width:656px;

                    padding-left:12px;

                    float: left;

                    }

                     

                    #footer {

                    clear: both;

                    }

                    • 7. Re: Question with regard to positioning (differences between design mode and live view)
                      mikemendo Level 1

                      Well that worked exactly as I wanted.... thank you!!! Now I have to wrap my head around how I messed it up (maybe it was just the bad math throwing off the design view verses the live view?)

                       

                      I did have to add height:550px; to the left container otherwise you couldn't see the image (easy fix), but otherwise that code did EXACTLY what I wantd.

                       

                      Now I just have to figure out how to add a spry menu to the top right of the right column, without messing up the banner area

                       

                      Thank you again!!

                      • 8. Re: Question with regard to positioning (differences between design mode and live view)
                        osgood_ Level 8

                        mikemendo wrote:

                         

                        Well that worked exactly as I wanted.... thank you!!! Now I have to wrap my head around how I messed it up (maybe it was just the bad math throwing off the design view verses the live view?)

                         

                         

                        Yes, if the maths are NOT 100% correct, (i.e., too wide) even a 1px out this will effect the way the page renders. Usually in Design View it would not work either and almost certainly not in Live View

                         

                        mikemendo wrote:

                         

                        I did have to add height:550px; to the left container otherwise you couldn't see the image (easy fix)

                         

                         

                        Yes, that's perfectly ok, I overlooked that.