Center div inside another div

[byqsri]

Hi I'm newbie CSS and OOCSS.
Using OOCSS what is the best way to vertically center the content of a
div when the height of the content is variable. In my particular case,
the height of the container div is variable. Also, I would love a
solution with no, or very little use of CSS hacks and/or non-semantic
markup?

Example:

<div class="container" >
<div class="content">
</div>
</div>

[Stefano J. Attardi]

On Oct 9, 10:20 am, byqsri <marco.rizze...@gmail.com> wrote:
> Using OOCSS what is the best way to vertically center the content of a
> div when the height of the content is variable. In my particular case,
> the height of the container div is variable.

Is the height of the content variable too? If that's the case, as far
as I know, there is no way to do it without Javascript.

If you know the height of the content, something like this should
work:

.container {
position: relative;
}

.content {
height: 200px;
/* center the top edge vertically */
position: absolute;
top: 50%;
/* pull it up by half the height */
margin-top: -100px;
}

Hope this helps,
Stefano

[byqsri]

I explain what I would do.

I have this template OOCSS:

<div id="page liquid">
<div id="bd">
<div class="leftCol">
</div>
<div class="main" id="main">
.............
<div id="itemsList">
</div>
</div>
</div>
</div>

Now I would do a ajax loading (like "<div>loading...</div>") that
fulls the "itemsList" div.
The problem is that I don't know the height of the "itemsList" div .
Its content changes depending the ajax call.
Do you have some suggestions?
Many Thanks

[Sam Sherlock]

you could use a oncomplete callback to set the height of that div after the content has been placed within it  (but I thought .main would expand automatically)
- S

2009/10/10 byqsri <marco.r...@gmail.com>

[Stefano J Attardi]

> Now I would do a ajax loading (like "<div>loading...</div>") that
> fulls the "itemsList" div.
> The problem is that I don't know the height of the "itemsList" div .
> Its content changes depending the ajax call.
> Do you have some suggestions?

In this new example "itemsList" is "content", and "main" is "container", right?

To vertically center itemsList within main after the contents have
loaded, you can just update the CSS I provided above from your JS
code.

Something like this (jQuery):

$.get('/...', {}, function(data, textStatus) {

... code that fills #itemsList ...

$('#itemsList').css('margin-top', - $('#itemsList')[0].offsetHeight/2 + 'px');
});

The other option is to do the positioning entirely in JS, since you're
loading the content from JS anyway. However, you will then run into
problems if you have a flexible layout and the user resizes the
browser window.

Cheers!

Stefano

[Nicole Sullivan]

At Paris Web I saw a cool experiment from Thibault Lanssade which used inline-block and vertical align. It is kind of bleeding edge though, so you get what you get... ;)

Nicole

--

Nicole Sullivan

Object Oriented CSS  http://wiki.github.com/stubbornella/oocss

Smush it  http://smush.it

Website  http://stubbornella.org

Tweet!  http://twitter.com/stubbornella

Book  Even Faster Websites with O'Reilly