Tue, 2010-12-07 18:14
I found your website yesterday. Great, great resource! Please keep going!
I have developed a proof of concept web application that my contract owner would like to go live with. I have developed it with xhtml (strict) with jQuery middle ware and a bunch of static xml (2D/flat database) as a 'back-end'.
In my current version, my content is not centered on the screen. I have tried several ways/methods of getting it there, but nothing ever seems to move to the right. I have posted a "Site Check" yesterday on this forum, hoping someone would give me some constructive critism. Any would be welcome.
Since I have already developed the html structure, how do I modify it so that everything moves to the right and centers on the page. Basically, I need left and right columns (divs) to be fluid and a center column (my content) to a specified width (in px). I think.
Current url is here.
Tony
Tue, 2010-12-07 19:18
#1
Remove the width property
Remove the width property from body. Set the width on #container, and make its margin :0 auto;
cheers,
gary
Wed, 2010-12-08 21:21
#2
Gary, Thanks for the
Gary,
Thanks for the information. After digging around for sometime last night, banging my head against the keyboard, I did find some information on the net about aligning the "main div" to the center of the screen. Here is what I ended up doing:
#container { width: 100%; left: 50%; position: absolute; margin-left: -487px; }
The 'container' is my content (including header and footer) wrapper. What actually makes this work is the margin-left setting. This is half of the width of my content. Works perfectly in all three major browsers.
Thanks for the suggestion.
Tony
Thu, 2010-12-09 00:54
#3
Take Gary's advice
He gave you the answer and the correct way to center a div.
Thu, 2010-12-09 05:16
#4
Actually, Tony, no it
Actually, Tony, no it doesn't. If the width is 100% of its parent, let's say the parent is 1000px wide, then the container is 1000px wide. Shifting it 50% from the left puts its left edge at 500 or 501px from the left edge of the parent. Now, by shifting it back with a negative 487px margin means there are 12 or 13px hanging out the right side of the parent.
gary
Thu, 2010-12-09 19:53
#5
Ok, I see your point.
Ok, I see your point.