|
| |
|
|
ou812
Posts: 1603
Joined: 1/5/2002
From: San Diego
Status: offline
 |
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.  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!
_____________________________
-brian
EnterpriseDB: Enterprise-class relational database management system
PostgreSQL: The world's most advanced open source database
|
|
|
|
Tailslide
Posts: 6296
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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
< Message edited by Tailslide -- 5/22/2006 15:47:52 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6296
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
dpf
Posts: 7126
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Centering Container - 5/22/2006 16:54:42
so this isnt a browser shortcoming it's a css shortcoming?
_____________________________
Dan
| |
|
|
|
curious monkey
Posts: 555
Joined: 4/28/2006
From: The lower handle of US
Status: offline
|
RE: Centering Container - 5/22/2006 17:14:45
this may be of some help.
Mr. Nichols
_____________________________
I have a ringing in my head and no one to help me answer it
| |
|
|
|
Tailslide
Posts: 6296
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
rdouglass
Posts: 9280
From: Biddeford, ME USA
Status: offline
|
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>
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
