Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Jun 2011
    Posts
    13
    Member #
    28277
    Liked
    2 times
    I am trying to set a fixed width to a website I'm making and then make the page centred, but I can't...
    I tried using the "text-align: center;" in the body and html and it didn't work, and I'm completely clueless!
    Please help if you can!

  2.  

  3. #2
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    try..:
    #centered_div{
    width: 300px;
    margin-left: 20%;[COLOR=rgb(51, 153, 102)] //This is what more or less centers it. You can mess with the value to see which is best.[/COLOR]
    }
    There might be a better way, but I think I forgots.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by George Dolidze, post: 211378
    try..:
    #centered_div{
    width: 300px;
    margin-left: 20%;[COLOR=rgb(51, 153, 102)] //This is what more or less centers it. You can mess with the value to see which is best.[/COLOR]
    }
    There might be a better way, but I think I forgots.
    The problem with that is, the bigger the screen gets, the less centered it is, unless you're using a liquid design where the div has a width of 60%.

    Let's assume your page is 900px wide.
    Do this:
    #centered_div{
    left:50%; /*Moves the left edge of the div to the middle*/
    margin-left:-450px; /*Negative half the width of the div, moves it back so the center of the div is in the middle*/
    position:relative; /*Required to make the positioning work. Absolute and fixed also work.*/
    width:900px;
    }
    George Dolidze likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    The easiest way to do this is to make a wrapper div to hold everything else on the page.
    Set your width for the div at whatever you want the fixed width to be.
    Make the left and right margins:auto - this will center the wrapper on the body.

    I have posted a simple example here. The wrapper is outlined in black and the various divs are outlined in red. View the source and the CSS and see how it works.
    George Dolidze likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    Junior Member
    Join Date
    Jun 2011
    Posts
    13
    Member #
    28277
    Liked
    2 times
    I think I have got a solution from...[COLOR=rgb(32, 117, 183)]George Dolidze[/COLOR] and [COLOR=rgb(32, 117, 183)]Ronald Roe[/COLOR].

    I don't know if this was what you meant but this is what I got, so simple and yet I believe it works!
    set the width to what ever percentage you want, then take it away from 100, then have what you have and set that to the "Margin-left:", for example I used...


    width: 70%;
    margin-left: 15%;
    So, I set the width, then did 100-70=30/2=15
    and I set 15 to be the margin-left: value.

    So far I believe that works!

  7. #6
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    You said you want fixed width though. If you set the width to 70%, then it will be different on different sized windows.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  8. #7
    Junior Member
    Join Date
    Jun 2011
    Posts
    13
    Member #
    28277
    Liked
    2 times
    Quote Originally Posted by George Dolidze, post: 211439
    You said you want fixed width though. If you set the width to 70%, then it will be different on different sized windows.

    Yea, lol.
    But really I just wanted something that would stay in the center and not ruin my page. Rofl!
    I don't know why I didn't just say that.

  9. #8
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    All's well that ends well
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Riley, post: 211441
    Yea, lol.
    But really I just wanted something that would stay in the center and not ruin my page. Rofl!
    I don't know why I didn't just say that.
    I'm glad you got it working. I have to point out, though you may have problems with the implementation if you're not careful.
    1. Check out what it looks like on screens much smaller than yours. Early netbooks are 800x600, your content might be very squished. Also, check it on a couple smartphones for the same reason.
    2. Watch yourself when adding borders, margins or padding to elements inside the centered div. Since the div and its margins equal 100%, there's no breathing room, and your elements will get pushed around. And keep in mind that if the elements inside aren't also using %, they'll get pushed around as windows get smaller.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Quote Originally Posted by Ronald Roe, post: 211478
    I'm glad you got it working. I have to point out, though you may have problems with the implementation if you're not careful.
    1. Check out what it looks like on screens much smaller than yours. Early netbooks are 800x600, your content might be very squished. Also, check it on a couple smartphones for the same reason.
    2. Watch yourself when adding borders, margins or padding to elements inside the centered div. Since the div and its margins equal 100%, there's no breathing room, and your elements will get pushed around. And keep in mind that if the elements inside aren't also using %, they'll get pushed around as windows get smaller.
    I didn't realize we still have to optimize for that ridiculous resolution :frantic:
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com