rkersh22 — 2012-02-07T01:10:19-05:00 — #1
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 — 2012-02-07T04:38:10-05:00 — #2
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:
<!--Rest of your website-->
With this applied on the wrapper
margin: 0 auto;
That way it shouldn't go off the left of the screen either, because its not using position absolute.
nuttyskunk — 2012-02-07T05:20:03-05:00 — #3
Dont forget that you will want text-align:center; on the body tag for the wrapper to centre itself.
aussiejohn — 2012-02-07T07:06:33-05:00 — #4
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.
paulob — 2012-02-07T08:01:04-05:00 — #5
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.
system — 2012-02-07T09:35:58-05:00 — #6
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:
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 — 2012-02-07T09:52:35-05:00 — #7
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 — 2012-02-07T17:06:35-05:00 — #8
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 — 2012-02-07T22:46:01-05:00 — #9
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.