SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trying to create left boundary

    Hello,

    I am using dreamweaver to code my html website and i've been stuck on this problem for quite some time. It is probably (hopefully) an easy fix. I am using ap divs for my layout and have them all set to absolute position with a left at 50% and a -500px margin-left. This makes the content of the website centered even when expanding and shrinking window.

    The confusing part is i want to create a boundary on the left side of the main apDiv. This boundary would stop the window from pushing the content out of the viewing area when resizing from corner dragging.

  2. #2
    SitePoint Member
    Join Date
    Sep 2011
    Location
    The Netherlands
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using position absolute is generally not a good idea like that, its better to make a wrapper div and place everything inside that. Then u apply the width u want your website to be on the wrapper div, which in your case would be 1000px i believe. Then u can just apply margin: 0 auto; on that div to center it, and thus everything inside of it

    Html would look somewhat like this:
    Code HTML4Strict:
    <body>
        <div id="wrapper">
             <!--Rest of your website-->
        </div>
    </body>

    With this applied on the wrapper
    Code CSS:
    #wrapper { 
        width: 1000px; 
        margin: 0 auto;
    }

    That way it shouldn't go off the left of the screen either, because its not using position absolute.

  3. #3
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Avs View Post
    Using position absolute is generally not a good idea like that, its better to make a wrapper div and place everything inside that. Then u apply the width u want your website to be on the wrapper div, which in your case would be 1000px i believe. Then u can just apply margin: 0 auto; on that div to center it, and thus everything inside of it

    Html would look somewhat like this:
    Code HTML4Strict:
    <body>
        <div id="wrapper">
             <!--Rest of your website-->
        </div>
    </body>

    With this applied on the wrapper
    Code CSS:
    #wrapper { 
        width: 1000px; 
        margin: 0 auto;
    }

    That way it shouldn't go off the left of the screen either, because its not using position absolute.
    Dont forget that you will want text-align:center; on the body tag for the wrapper to centre itself.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NuttySkunk View Post
    Dont forget that you will want text-align:center; on the body tag for the wrapper to centre itself.
    That's what the fixed width and margin:0 auto; do already, no need to put a text-align:center; on the parent as it will only center text and inline elements.

    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    That's what the fixed width and margin:0 auto; do already, no need to put a text-align:center; on the parent as it will only center text and inline elements.

    Actually text-align:center on a parent is an old hack for IE5 as IE5 doesn't understand margin:auto but it will center nested block elements. IE6 + understand margin:auto so the hack isn't needed these days as IE5 is long gone.

    Not many people realise but IE6 and IE7 will also center nested block elements (that have a width) when the parent has text-align:center applied and wonder what has happened.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rkersh22 View Post
    I am using dreamweaver to code my html website
    Normally my response to this is "Well there's your problem" -- and it's true since it probably means a lack of semantic markup, separation of presentation from content, and on the whole two or three times as much markup as necessary... (as a dearly departed friend often said, "the only thing you can learn from Dreamweaver is how not to build a website") but that's secondary to:

    Quote Originally Posted by rkersh22 View Post
    I am using ap divs for my layout and have them all set to absolute position with a left at 50% and a -500px margin-left. This makes the content of the website centered even when expanding and shrinking window.
    Well there's your problem. As everyone else is saying in this thread, that's really not a good way to build a layout, particularly to center a content area.

    But if you're using that technique for centering, the rest of your codebase may be in question. (really weird you'd even learn APO before margin:auto) -- and without us seeing the code for the page in question or even better, what you have so far rendering, anything we tell you is probably a wild guess.

  7. #7
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it, thank you for the help. i was able to put all the ap divs within the wrapper and worked like a charm.

  8. #8
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Not many people realise but IE6 and IE7 will also center nested block elements (that have a width) when the parent has text-align:center applied and wonder what has happened.
    I'm sure I've come across that issue once or twice

    It's been a (long) while since I've had to hack anything for <= IE5.5 ...



    Sent from my HTC Desire HD using Tapatalk
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Not many people realise but IE6 and IE7 will also center nested block elements (that have a width) when the parent has text-align:center applied and wonder what has happened.
    I always personally love when this issue comes up in a thread and someone is having this issue. It makes my internet-ego soar like an eagle.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •