Centering Container (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

ou812 -> Centering Container (5/22/2006 15:20:40)

Still plugging along slowly, trying to learn/use CSS when I can (by copying and modifying).

I'm trying to center a div container on a page. It works great in FF (yeah!). I just tried it out in IE, and ugh. [:o] I have some things to work on in getting it to look right in IE, but first how do I center my container?

Here's a clip of my css (since I'm only working with it locally right now):
div.container{
position:relative;
margin-top:auto;
margin-left:auto;
margin-right:auto;
width:725px;
height:422px;
}

I've read around a little and have seen to try percentages instead of auto for IE, but this isn't quite what I was hoping for. Is there a nice way to have it center in all browsers?

thanks!



Tailslide -> RE: Centering Container (5/22/2006 15:39:55)

Hi Brian

Centering stuff vertically in CSS is not easily done (centering divs and sticky footers being the hardest things I've found to do properly with CSS) - there are a few different ways that you could tackle the problem:

1. Use Javascript - http://www.alistapart.com/d/footers/footer_variation1.html If JS is switched off then the vertical alignment disappears although horizontal alignment remains. Depending on the layout this could be a viable solution.
2. CSS - using display:table-cell: http://www.brunildo.org/test/img_center.html
3. CSS again - using negative margins: http://www.wpdfd.com/editorial/thebox/deadcentre3.html
4. Table-layout - use a single cell to vertically align the whole page (assuming it's for a whole page)

None of these are really ideal. The CSS options are all pretty hacky for vertical alignment - who knows what will happen with these rules in the future - this wasn't what they were designed to do. Tables are... well for tabular data.

I think, depending on the layout I'd probably go for the Javascript option as being the least likely to cause long-term problems (just check out what happens with JS off). People tend to frown on Javascript but I think that as long as it's "unobtrusive" and an enhancement rather than an "instead of" then it's fine.

Edit: Here's another way by John Hicks - anything he comes up with is well worth trying: http://www.hicksdesign.co.uk/journal/how-to-vertical-centering-with-css



ou812 -> RE: Centering Container (5/22/2006 15:49:02)

Oh my! I thought I was just missing something, and not knowing what to do (well, that not knowing part is still true). I had no idea it was an onging issue. Thanks for the info and the links. I'll give some of them a go and see what works for me. And, glad to know I'm not completely dense for not getting it. [8|]



Tailslide -> RE: Centering Container (5/22/2006 16:05:54)

No you're not dense at all! It would seem a reasonably logical thing to be able to do!

That last link from Jon Hicks seems to get around the issues that the negative margin version brings up so may well be worth a try.



ou812 -> RE: Centering Container (5/22/2006 16:18:41)

I did some quick work with the container in the single-cell table, which at least looks better now. I will probably play with the John Hicks one just to learn some more and see how it looks too.

Thanks again![:)]



dpf -> RE: Centering Container (5/22/2006 16:54:42)

so this isnt a browser shortcoming it's a css shortcoming?



curious monkey -> RE: Centering Container (5/22/2006 17:14:45)

this may be of some help.
Mr. Nichols



ou812 -> RE: Centering Container (5/22/2006 19:11:04)

quote:

ORIGINAL: curious monkey

this may be of some help.
Mr. Nichols


Well, it centered in IE but not FF. My original problem was the opposite. [8D]

Dan, I'm not sure where the problem is. I would say the browser, because they didn't act the same way when using "auto" for margins. But, I'm a CSS newbie... so I'll leave it to the experts.



Tailslide -> RE: Centering Container (5/23/2006 2:56:53)

You'll forgive me if I've not got this quite right as, frankly a lot of the technicalities are waaay over my head. Anyway, my understanding is that the issue is with (X)HTML rather than specifically CSS - it's just if you don't use tables for layout then it's something you will come across.

The issue (again as I understand it) is that the HTML page sees itself as endless and the browser viewport is just looking at a part of that page. This is why if you try using relative or normal positioning as you would normally with CSS divs, you run into trouble as the div has nothing to measure it's centre from (the page being endless). You can get around this by using absolute positioning (which removes elements completely from the normal flow of the document) and negative margins or scripting (as with scripting you can deal with the viewport itself) or tables - but it's not possible, far as I know, to deal with it using nice, simple "normal" positioning.

As to why the HTML page can obviously "see" it's horizontal boundaries and not it's vertical ones - who knows. The problem is compounded by the fact that different browsers react differently to the various ways round the issue (well they would - it was never a standard in the first place).



rdouglass -> RE: Centering Container (5/23/2006 8:38:54)

The solution is to use an IE hack.

I know, I know, no hacks and I try to live by that myself. But my philosophy is if you really want to learn this stuff, don't "drop back" and use a table when you can't figure something out. That will make more headaches down the road. IMO tables and positioning div's is a *real* pain.

To make it work without any IE hacks is the goal we *want* to do but in practical terms (read "make a profit") we need to throw an IE hack in once in a while.

Develop for FF and fix for IE.

People are doing what you want to do without using tables so you're not re-inventing the wheel. And I do realize that we all have deadlines but IMO it's worth the extra pain to get thru this. I'm doing the same thing myself - it would be quicker sometimes to do it with a table but I know it will be worth it in the long run doing it without.

You said you had it working in IE and then working in FF.

Develop for FF and fix for IE.

</$.02>



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875