liquid center (Full Version)

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



Message

carrie -> liquid center (8/8/2007 14:01:38)

Hi all!

Can anyone help me center this page? Ideally, an equal amount of background would be visibile at the top, left, right, and bottom.
The max-width is thanks to liquid designs on widescreen browsers. The max-width works on higher resolutions, but it isn't centering, and the vertical center is off when you change the browser size.

Any help is appreciated.

Thanks,
Carrie



Tailslide -> RE: liquid center (8/8/2007 14:55:02)

Can you give us a link?

To centre a div horizontally you'd add margin:0 auto; to it's style rule.

Vertical centering is very difficult to achieve with pure CSS (mainly because with CSS there's an issue of exactly where the top and bottom of the viewport are which makes measuring the centre difficult).

There's this article: http://www.hicksdesign.co.uk/journal/how-to-vertical-centering-with-css Which shows a CSS method but it's pretty hacky in my view.

You could use a single-cell table to do this too but, again that's not what tables are for so I'd generally avoid this.

The other option would be to use Javascript to centre vertically. I'd tend to take this option myself - without JS on it would harmlessly revert to being top aligned on the page so no harm done.

It's a toughie - hope this helps!



carrie -> RE: liquid center (8/8/2007 15:02:21)

How silly of me! http://www.coastrealty.cc/index3.htm

The centering methods seem to like fixed width objects better.

Carrie



Donkey -> RE: liquid center (8/8/2007 20:25:32)

This works in FF after a fashion, but your min & max widths preclude exact horizontal centering on larger screen sizes and you get the dreaded horizontal scroll on the smaller ones.

As far as I am aware margin:auto only works when the width is fixed because if the width is set to a percentage it will only expand to that percentage if the enclosed text and images take up that space - otherwise it will just fit it's content. By not setting a width to the container div and giving it a 10% margin each side you get the approx effect of an 80% width.

Of course I may be wrong, and if so I am sure someone with greater knowledge will be along shortly to correct me. 

*{
margin:0;
padding:0;
border: none;
}

html, body{
width:99.8%;
height:100%;
}


#container {
	position: relative;
	border: 1px solid #000;
	margin: auto 10% auto 10%;
	border-bottom: 1px solid #c93;
	height: 90%;
	background-color: #ff9;
	text-align: left;
             min-width:972px;
            max-width: 1024px;
}



carrie -> RE: liquid center (8/9/2007 9:38:44)

Well, I decided to just use a fixed width, it's much easier to center, but without a fixed height, is it possible to center vertically as well with .css? Height would be determined by the content.
Also, I'm getting a vertical scrollbar in Firefox - can anybody tell me why? http://www.coastrealty.cc/index3.htm

Carrie



carrie -> RE: liquid center -- in the home stretch (8/9/2007 11:02:53)

Ok, well I went back to the drawing board, gave the div a fixed width, and found a great solution with just one problem, the scrolling in IE.

Can anyone see why? http://www.coastrealty.cc/index4.htm



Tailslide -> RE: liquid center -- in the home stretch (8/9/2007 11:09:27)

At what width is it scrolling? Oh are you talking about height?

edit: on the rule where you've got body, html {height:100%;} if you remove html then the vertical scroller disappears.




carrie -> RE: liquid center -- in the home stretch (8/9/2007 11:15:34)

The height. On IE 6 1024 X 768 it scrolls down quite a bit, even though the box is in the middle of the screen.
Can you see why it does that?

Carrie



Tailslide -> RE: liquid center -- in the home stretch (8/9/2007 11:18:19)

Yes - see above.

In IE7 the central div isn't displaying at all.



carrie -> RE: liquid center -- in the home stretch (8/9/2007 11:27:56)

If I remove that html, then I lose the vertical centering in firefox, and the scroller still appears to me in IE 6.
In IE 7 it is way off - so maybe it's not possible to vertically center a div with no height in all browsers.
Have you seen it done?

Carrie



Tailslide -> RE: liquid center -- in the home stretch (8/9/2007 11:45:43)

Yes it is - here: http://www.littleblueplane.com/test/verttest.html

But it uses a little javascript for the vertical alignment. In this example I'm using % for width and height of the div - but without a height it just assumes it's height from the content in the inner div. With JS off, it reverts to being top-aligned.

Personally I'd use this route at the moment. Centering using CSS would be fine if certain browsers would play along - but they don't and hacks are in my view best avoided to stop problems in the future. I don't like using single cell tables either - personally I think the JS is "cleaner" as it can be removed to an external file and doesn't pollute the markup. I wouldn't normally use JS for presentational stuff but the options are not easy to implement and pretty hacky.

edit: the only effective CSS method I've come across is this one: http://www.wpdfd.com/editorial/thebox/deadcentre4.html BUT it goes horribly wrong if you don't use set widths and heights - so not a great deal of use for you.



carrie -> RE: liquid center -- in the home stretch (8/9/2007 13:25:52)

This is without a doubt the easiest solution I've seen to date. And clean too!

Thank you, it seems to be the best solution to date.

Carrie



dpf -> RE: liquid center -- in the home stretch (8/9/2007 18:53:02)

OH - that sort of liquid center - never mind



Tailslide -> RE: liquid center -- in the home stretch (8/10/2007 3:29:01)


quote:

ORIGINAL: dpf

OH - that sort of liquid center - never mind

[:D]You know it was only yesterday when I was just wondering where you'd got to!



carrie -> RE: liquid center (8/10/2007 22:59:13)

Tailslide,

I implemented the javascript center to this page and it works beautifully, except when I add the second javascript: http://www.getinkpr.com/default-1.asp

If the window is not maximized (on IE7, Firefox on 20-in widescreen monitor), the box will 'stick' to the top of the window, but as soon as you start to resize the window, it moves into the vertical center.

I've confirmed it's a conflict with the other script 'ddmenu-test2.js', but I don't know what exactly is causing the conflict, or if it can be resolved.

Can you see anything that may be causing this problem? After spending so much time to find a solution that will work, I'd hate to revert to a table now.

Thanks,
Carrie



Tailslide -> RE: liquid center (8/11/2007 3:36:30)

Change your body tag to this: 

<body OnLoad="initTip();setContent()">



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125