auto centering div within a div

**ba$h** · Aug 2, 2011 07:40

Hi there expert web devs,

I have what should be a simple question for you. I have an ad location on my page within a 728x430 div. The tag calls for videos, and what is returned could be one of two things: a 400x300 video OR a 400x300 video with a 300x250 companion banner. So my question is: how can I set the div to dynamically center the content so that if there's just one 400x300 video, it is centered nicely within the 728x430 frame, but if there is also a companion banner, the two divs realign to stay centered within that same frame?

Here's an example with no centering involved:

<div style="width: 728px; height: 430px; background-color: black; overflow: hidden;">
<div style="width: 400px; height: 300px;">
<script language="javascript" src="http://example.com/example.html"></script>
</div>
<script language="javascript" src="http://example.com/js/companion.js"></script>
<div id="comp_300x250" style=" width: 300px; height: 250px; display: none;"></div>
</div>

Any help is MUCH appreciated! Thanks

**ralph.m** · Aug 2, 2011 15:43

Hi ba$sh. Thread moved to CSS forum.

Do you mean vertical centering or horizontal? Horizontal is easy: just use margin: 0 auto;.

For vertical, you could perhaps set the container to display: table and the contents to display: table-cell. But the combined heights of the two inner divs seems greater than that of the container, so vertical centering is irrelevant in that case.

**sdt76** · Aug 3, 2011 14:46

For some reason vertical centering was left out of every spec so you have jump through hoops with a bunch of nested divs to do what valign=middle did in way less characters. It kind of goes against the idea of CSS being the answer for more efficient code. I don't get that. Vertical centering is incredibly useful.

Anyway, this is a tutorial I found interesting, if a bit hacky. I am not sure if it addresses your need for the content to always remain vertically centered regardless of quantity, but I think it does. You may need to tweak it.

Vertical Centering in CSS

**Paul O'B** · Aug 4, 2011 02:18

Hi,

You can do this very easily without extra mark up by using display table-cell as already mentioned but support is only ie8+.

For a full cross browser method back to ie5.5. you can do this which requires only one extra element.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.outer {
    width: 728px;
    height: 430px;
    background-color: black;
    overflow: hidden;
    text-align:center;
    margin:10px;
}
.banner {
    width: 400px;
    height: 300px;
    background:blue;
}
.companion {
    width: 300px;
    height: 250px;
    background:green;
}
.banner, .companion, .outer b {
    vertical-align:middle;
    display:inline-block;
}
.outer b {height:100%;width:1px;overflow:hidden}
</style>
</head>
<body>
<div class="outer"><span class="banner">Banner</span><span class="companion">Companion</span></span><b></b></div>
<div class="outer"><span class="banner">Banner</span><b></b></div>
<div class="outer"><span class="companion">Companion</span></span><b></b></div>
</body>
</html>

**sdt76** · Aug 4, 2011 08:41

Hey Paul,
Maybe you can help me out with this. I have a similar issue but with vertical alignment. I tried your code, but was not able to do what I am trying to do.

I am trying to get a div to center vertically within another div (it's possible I may not even need a nested div, but that's part of what I am asking) so that if I add or subtract links, they will continually be centered. The code below has the code that I tried to modify, plus the table I am attempting to emulate. Do you have any idea how to do this. Is it even possible? Notice that with the table, if I add extra cells for more links, everything remains aligned centered vertically.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#outer {
    overflow: hidden;
	width: 134px;
	height: 149px;
	background: url(../../assets/images/global/globalsubnav-background.jpg);
	float:left;
	margin: 10px
}
#inner {
    width: 300px;
    height: 250px;
}
.companion, .outer b {
    vertical-align:middle;
    display:inline-block;
}
.outer b {height:100%;width:1px;overflow:hidden}
</style>
</head>
<body>
<div id="outer"><div id="inner"><p>Link 1</p><p>Link 2</p></div></div>
 
<br style="clear:left" />
<br />
<br />
I am trying to get div with id=inner to align vertically in the the div with id=outer. This way the links will be centered in the box, aligned right. Then if I take links out or add them, it will always remain centered vertically. The table below shows what I am trying to do:<br />
<br />
<br />
<table width="184" height="149" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="184" bgcolor="#E2E2E2"><table width="190" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="3"></td>
      </tr>
      <tr>
        <td width="1" rowspan="3"><img src="http://www.sitepoint.com/assets/images/spacer.gif" width="1" height="1" /></td>
        <td width="30">&nbsp;</td>
        <td width="159" height="20" bgcolor="#999999"><span class="headersubnav">Link 1</span></td>
      </tr>
      <tr>
        <td class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">&nbsp;</td>
        <td height="20" class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">Link 2</td>
      </tr>
      <tr>
        <td class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">&nbsp;</td>
        <td height="20" class="out" onmouseover="this.className='over'" onmouseout="this.className='out'">Link 3</td>
      </tr>
    </table></td>
  </tr>
</table>
<br />
</body>
</html>

**Paul O'B** · Aug 4, 2011 10:06

Did you mean something like this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul{margin:0;padding:0;list-style:none;}
.outer {
    overflow: hidden;
    width: 134px;
    height: 149px;
    background:#ccc url(../../assets/images/global/globalsubnav-background.jpg);
    float:left;
    margin: 10px
}
.push {
    height:100%;    
    width:1px;
    overflow:hidden
}
.outer ul,.push {display:inline-block;vertical-align:middle}
* html .outer ul{display:inline}/* ie6 hack for inline-block elements*/
*+html .outer ul{display:inline}/* ie7 hack for inline-block elements*/
.outer li{padding:0 10px}


</style>
</head>
<body>
<div class="outer">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>
    <div class="push"></div>
</div>
<div class="outer">
    <ul>
        <li>Link 3</li>
    </ul>
    <div class="push"></div>
</div>

</body>
</html>

**sdt76** · Aug 4, 2011 12:56

Yes! Exactly. How did you do that? I guess one trick is not to insist on a Div nested in a Div, but go with lists instead for the links. Thank you.

**sdt76** · Aug 4, 2011 13:01

I know you are probably a busy guy, but if you have some spare time, can you explain the rationale behind that?

**Paul O'B** · Aug 5, 2011 01:17

Originally Posted by sdt76

I know you are probably a busy guy, but if you have some spare time, can you explain the rationale behind that?

It's the same method that Gary mentions here.

Basically you turn elements into inline-blocks and then you can use vertical-align:middle which applies to inline and inline-block elements.

To make them all center on the container you need one extra element which is set to the height of the container and the the vertical-align:middle ensures that all are aligned to the middle and as the extra element is 100% high they all end up being centred.

It just requires one extra element so is not really that much of a problem. Of course if you just wanted IE8+ support just use the usual display table properties for a similar effect but the inline-block works right back to ie5.5 except that you need the hack I showed and in the order I showed.

I guess one trick is not to insist on a Div nested in a Div, but go with lists instead for the links.

No you could have used a nested div to achieve the same effect instead of the ul where the nested div also holds your inner links. Its the parent that holds the elements that gets vertically aligned thus aligning the elements within.

You can read more on inline-block here.

**sdt76** · Aug 5, 2011 08:44

That's a great technique. Just wondering though, if display:inline is the main fix, does that mean I will not be able to have the background color of the links stretch to the left border of the div, the way it is in the table? I have been trying to modify the code to get that to work but I am thinking that because it is display:inline rather than :block, it means that I will not be able to get the default 100% width that a block element has, to get the background color to stretch to the right.

This is actually much trickier than I thought it would be.

**sdt76** · Aug 5, 2011 08:47

Here is the code so you see what I mean. The background color is set to a darker gray, and it is flushed to the left, but I am hoping to get the opposite, space on the left, background flush to the right border.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
	margin:0;
	padding:0;
	list-style:none;
}
.outer {
	overflow: hidden;
	width: 134px;
	height: 149px;
	background:#ccc;
	float:left;
	margin: 10px;
}
.push {
	height:100%;
	width:1px;
	overflow:hidden;
}
.outer ul, .push {
	display:inline-block;
	vertical-align:middle;
}
* html .outer ul {
	display:inline;
}/* ie6 hack for inline-block elements*/
*+html .outer ul {
	display:inline;
}/* ie7 hack for inline-block elements*/
.outer li {
	padding:0 10px;
	background:#666;
}
</style>
</head>
<body>
<div class="outer">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
  <div class="push"></div>
</div>
<div class="outer">
  <ul>
    <li>Link 3</li>
  </ul>
  <div class="push"></div>
</div>
</body>
</html>

**Paul O'B** · Aug 5, 2011 10:14

Originally Posted by sdt76

Here is the code so you see what I mean. The background color is set to a darker gray, and it is flushed to the left, but I am hoping to get the opposite, space on the left, background flush to the right border.

If you want the element full width we will need a different approach as IE6 and 7 are a bit awkward with the whitespace nodes so we can revert to another method that actually uses less html and no empty div. For godd browsers we just use the display:table properties instead.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.outer {
    overflow: hidden;
    width: 134px;
    height: 149px;
    background:#ccc;
    float:left;
    margin: 10px;
    white-space:nowrap;
    word-spacing:-.25em;/*hide whitespace nodes in all but webkit*/
    display:table;
}
.outer ul {
    margin:0;
    padding:0;
    list-style:none;
    width:134px;
    display:table-cell;
    vertical-align:middle;
    position:relative;
}
.outer li{
    width:100%;    
    position:relative;
}
.outer li a{
    display:block;
    padding:0 10px;
    background:#666;
    zoom:1.0;
    position:relative
}
.outer li a:hover{background:red}
* html .outer ul {top:50%}/* ie6 hack*/
* html .outer li {top:-50%}/* ie6 hack*/
*+html .outer ul {top:50%}/* ie6 hack*/
*+html .outer li {top:-50%}/* ie6 hack*/
</style>
</head>
<body>
<div class="outer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</div>
<div class="outer">
    <ul>
        <li><a href="#">Link 3</a></li>
    </ul>
</div>
<div class="outer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</div>
</body>
</html>

**sdt76** · Aug 5, 2011 11:32

Ah! That's perfect. That's exactly what I am looking for, with lean code and I tested it. It looks perfect in all browsers. Thank you.

Incidentally, is there a link that explains this method like the one you gave me earlier?

**sdt76** · Aug 5, 2011 12:57

Just a note to anyone who uses this. The word spacing trick worked to get rid of the whitespace, but it also causes the words in the <li> to crash against eachother LikeThis.

So I just added "word-spacing: 0px;" to the <li> and that seems to work to counter act the negative affect and put spacing back between the words.

**Paul O'B** · Aug 6, 2011 05:21

Originally Posted by sdt76

Just a note to anyone who uses this. The word spacing trick worked to get rid of the whitespace, but it also causes the words in the <li> to crash against eachother LikeThis.

So I just added "word-spacing: 0px;" to the <li> and that seems to work to counter act the negative affect and put spacing back between the words.

Sorry, my fault, I meant to remove that from the second example as we are not using inline-block any more and the white space issue shouldn't be a problem.

Code:

.outer {
    overflow: hidden;
    width: 134px;
    height: 149px;
    background:#ccc;
    float:left;
    margin: 10px;
    display:table;
}

Your solution was right to counteract it though anyway

Incidentally, is there a link that explains this method like the one you gave me earlier?

The method for ie8+ is just the basic css using the display:table and display:table-cell properties and allows to mimic the exact behavior of a table with regards to vertical-alignment. You just use it in the same way as you would with a table (display:table on the parent and then an inner element that is made dispaly:table-cell and holds all the content for that cell.)

The method for IE6 and 7 is a little bit more complex and relies on a flawed approach in those browsers and you simply move a parent element down the page with relative positioning by top:50% and then move the inner element back up by top:-50%. In all browsers except IE6 an 7 that would just bring the element right back to the starting position but IE6 and 7 end up with the element being centred instead because the inner is only moved up by 50% of its own height thus making it exactly central.

User Tag List

Thread: auto centering div within a div

Thread Tools

Display

auto centering div within a div

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions