#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    3
    Rep Power
    0

    Percentage Width Not Giving Desired Result


    Hi,

    First of all I'd like to say thanks for any help given and secondly sorry if this has already been asked/answered but I was quite sure what to search for.

    Now down to the problem. I have my wrapper at 1052px with margin of 0 auto; The problem is when I set the width as a percentage the wrapper squashes from right to left while the left side of the wrapper sort of stays where it is rather than moving to the left of the page. Here is the basic version of what I have and the problem is it giving me. Thanks again for your help.

    <!doctype html>
    <html>
    <head>
    <style>
    .wrap {
    background-color:#000;
    width:55%;
    height:800px;
    margin:0 auto;
    }

    </style>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>

    <body>

    <div class="wrap">


    </div>

    </body>
    </html>


    PS.

    Do I have to define a max-width and min-width to fix it?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    I can't see the problem - I have set up your html and css in jsfiddle and it is doing exactly what is expected - View here
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    3
    Rep Power
    0
    The problem is when I have content inside the black box that all shrinks too and what I was looking for is the wrap to stay the same width but the entire thing move to the left when the page width is decreased. Once the browser width is a lower value than the wrap width that is when I want everything else to start to shrink.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    This is where you need to start using media queries then as you will need to check the browser width to determine how you want your content displayed.

    I am not sure what width you want your content area to be at so I will base it on being a maximum of 960px for 1024px browser width and make the changes for any browser widths that are less than that.

    Code:
    .wrap { 
        background-color: #000;
        width:  93.75%; // Change this to the actual width in % that you want for smaller broswers
        height:800px;
        margin: 0 auto;
    }
    // Change the layout to a fixed width when the browser reach 1024px (in ems as it is best)
    @media screen and (min-width: 64em) {
     .wrap {
        width: 960px;
      }
    }
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    3
    Rep Power
    0
    Thanks for the advice

IMN logo majestic logo threadwatch logo seochat tools logo