trying to create left boundary

**rkersh22** · Feb 7, 2012 00:10

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.

**Avs** · Feb 7, 2012 03:38

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.

**NuttySkunk** · Feb 7, 2012 04:20

Originally Posted by Avs

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.

**AussieJohn** · Feb 7, 2012 06:06

Originally Posted by NuttySkunk

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.

**Paul O'B** · Feb 7, 2012 07:01

Originally Posted by AussieJohn

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.

**deathshadow60** · Feb 7, 2012 08:35

Originally Posted by rkersh22

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:

Originally Posted by rkersh22

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.

**rkersh22** · Feb 7, 2012 08:52

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.

**AussieJohn** · Feb 7, 2012 16:06

Originally Posted by Paul O'B

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

**RyanReese** · Feb 7, 2012 21:46

Originally Posted by Paul O'B

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.

User Tag List

Thread: trying to create left boundary

Thread Tools

Display

trying to create left boundary

Bookmarks

Bookmarks

Posting Permissions