Vertically centering a div with equall height columns

**donboe** · Mar 8, 2013 01:32

I try to center the main content (sidebar and content) vertically and have equal height columns depending on the content. For this I tried the table/table-cell method in combination with an absolute position div to get the equal height columns, but that div is stretching from top to bottom of the viewport, while I have set the overflow on the parent (#container) to hidden. Below is the html and css. What am I doing wrong?

HTML 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>
* {
	margin: 0;
	padding: 0;
}

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

#wrapper {
	width: 960px;
	height: 100%;
	margin: 0 0 0 20px; 
	overflow: hidden; 
	display: table;
}

#container {
	width: 100%;
  display: table-cell;
  vertical-align: middle;
	position: relative;
	z-index: 4;
	overflow: hidden;
}

#sidebar,
#content {
	width: 27%;
	padding: 25px 0;
	float: left;
	position: relative;
	z-index: 1;
	vertical-align: top;
}

#content {
	width: 72%;
}

.sidebar {
	width: 260px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: #FF0000;
}


</style>
</head>

<body>
<div id="wrapper">
  <div id="container">
    <div id="sidebar">Hello</div>
    <div id="content">Hello</div>
    <div class="sidebar"></div>
  </div>
</div>
</body>
</html>

Thank you in advance

**smanaher** · Mar 11, 2013 20:23

donboe,

You had a lot of code in there that didn't belong and some that was missing to do what you wanted it to do. Also, you had defined contradictory values for some of your selectors. The following code does what you suggested.

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>


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

#wrapper 
{
width: 100%;
height: 100%;
margin: 0 auto 0 auto; 
}

#container 
{
height:100%;
width: 100%;
margin-right: auto;
margin-left: auto;
}

#content 
{
height:50%;
width: 33%;
margin-right:auto;
margin-left:auto;
background: #000;
display:inline-block;
}

#sidebar 
{
height:50%;
width: 33%;
background: #555;
float:right;
display:inline-block;
}


#sidebar_one 
{ 
height:50%;
width: 33%;
background: #FF0000;
display:inline-block;
}


</style>
</head>

<body>
<div id="wrapper">
  <div id="container">
    <div id="sidebar">Hello</div>
    <div id="content">Hello</div>
    <div id="sidebar_one">Hello</div>
  </div>
</div>
</body>
</html>

Hope that helps you,

Shawn

**donboe** · Mar 14, 2013 04:19

Hi Shawn. Thank you for the reply. This is working indeed, but all elements have a set height! Where I actually need the container div to be centered, holding the sidebar and content divs. The height from the content div is unknown and the sitebar div should extend depending on the height from the content. That is why I used Paul OB's method with a absolute positioned div holding the background for the sidebar. But when I use the table/table-cell method as in th actual post the background of the absolute positioned div is extending true the contaner div (display: table-cell), while I used overflow: hidden on the container div as well.

**ronpat** · Mar 14, 2013 05:58

donboe, the code that you posted shows a sidebar with a fixed width and two columns with specific percent widths. Are the dimensions in your sample accurate? In other words, is one sidebar a fixed with and the other two columns percent widths instead of two fixed and one fluid column?

In addition, it looks like the presumably shorter row of text columns is vertically centered within full window height colored columns.

Is that the picture or am I overcomplicating it?

**donboe** · Mar 16, 2013 05:02

They were not complete accurate indeed ronpat, but i have adjusted some things and now everything is okay. For center the div vertical i used the pseudo :before on the wrapper. Here is the complete CSS:

Code:

* {
       margin: 0;
       padding: 0;
}

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

body:before {
	content:'';
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1;
	font-size: 100%;
	background: #0000;
	color: #000;
}

#wrapper {
	width: 100%;
	max-width: 1060px;
	height: 100%;
	min-height: 100%;
	margin: -42px 0 0;
	position: relative;	
	overflow: hidden;
}

#wrapper:before {
  	content: '';
  	display: inline-block;
  	height: 100%;
  	vertical-align: middle;
}

#footer_panel {
	width: 100%;
	max-width: 1060px;
	height: 42px;
	position: relative;
	clear: both;
	z-index: 200px;
	font-size: .875em;	
}

#header {
	width: 98.11320754716981%;
	max-width: 1040px;
	position: absolute;
	top: 0;
	left: 20px;
	overflow: hidden;
	border-top: 42px solid #FFF;
	z-index: 100;
	clear: both;
}

#main {
	width: 100%;
	max-width: 1040px;
	min-height: 1px;
	margin: 20px 0 0 20px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	z-index: 4;
	overflow: hidden;
}

#sidebar {
	width: 25%;
	max-width: 260px;
	padding: 40px 0;
	position: relative;
	float: left;
	z-index: 1;
	vertical-align: top;
}

.sidebar {
	width: 25%;
	max-width: 258px;
	height: 100%;
	position: absolute;	
	top: 0;
	bottom: 0;
	left: 20px;
	z-index: 0;
	border-right: solid 2px #F6491F; 
	background: #FFF;
	zoom: 1; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;	
}

#mask {
	width: 75%;
	max-width: 780px;
	position: absolute;
	overflow: hidden;
	top: 0;
	bottom: 0;
	left: 280px;
}

#content {
	width: 100%;
	max-width: 780px;
	padding: 40px 0; 
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: none;
	z-index: 1;
	overflow: hidden;
	background: #FFF;
	zoom: 1; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;	
}											

#footer_panel #footer {
	width: 98.11320754716981%;
	max-width: 1040px;
	height: 42px;
	line-height: 42px;
	margin-left: 20px;
	background: #000;
	color: #FFF;
	zoom: 1; 
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  	filter: alpha(opacity=80);
  	-moz-opacity: 0.8;
  	-khtml-opacity: 0.8;
  	opacity: 0.8;
	position: relative;
	z-index: 100;
	overflow: hidden;
}

#footer_panel #footer p {
	margin-left: 30px;
}

**ronpat** · Mar 16, 2013 05:34

donboe, would you be kind enough to post the HTML also? I tried to use the pseudo :before but without success across the main 4 browsers. I'd really like to see how this works.

Thanks!

**donboe** · Mar 18, 2013 02:01

hi ronpat. This is the page i am using it. Hope this give you some idea.

**Paul O'B** · Mar 18, 2013 03:26

Hi,

That looks similar to my old demo here. Is that what you meant ?

**donboe** · Mar 18, 2013 03:35

Yes indeed. That is what I ment. I see you used the table/table-cell technique. Would you suggest to use that method as well or can I keep using the way I have it now?

**Paul O'B** · Mar 18, 2013 03:49

Hi,

It all depends whether you want the welcome section content vertically aligned to the sidebar as that is more easily done with the table-cell method I have used.

I also note you are using a script of sorts to vertically center that div but my example does it with css and in a better way. In your example if you make the viewport smaller then the whole layout disappears out of the top of the viewport whereas mine always resides inside the viewport.

It all depends on what you want to happen next

**donboe** · Mar 18, 2013 03:55

Hi Paul. I see what you mean. Thank you for the advise. I will have a closer look at your example and keep you informed

**donboe** · Apr 12, 2013 00:40

Hi Paul. I amworking on a left aligned layout, with a vertical aligned div, for which I use your old demo as mentioned in this post. But something strange is going on. In Firefox, Opera and Safari everything is as expected, but in Chrome and IE everything is messed up. In chrome the vertical aligned dive is horizontal centered as well as if it has margin: auto as a property, and in IE things are even worse. There both the sidebar and content divs are taking up the entire width of the parant (outer) and are display under eachother. Not sure if I am overseeing something here. Can you please have a look what I am doing wrong? This is the link to the temporary side

**Paul O'B** · Apr 12, 2013 09:00

Hi,

You probably need something roughly like this:

Code:

#outer{clear:both;float:left;margin-top:-156px}
#content{padding-top:86px}

The middle section was snagging on the top float but if you clear it then the top margin has no effect so you have to float the table etc and adjust everything to match.

**donboe** · Apr 13, 2013 01:32

Hi Paul. Works great. Thank you so much.

User Tag List

Thread: Vertically centering a div with equall height columns

Thread Tools

Display

Vertically centering a div with equall height columns

Bookmarks

Bookmarks

Posting Permissions