Vertically centering a div with equall height columns

donboe · March 8, 2013, 7:32am

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?


<!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 · March 12, 2013, 2:23am

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.

<!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 · March 14, 2013, 10:19am

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 · March 14, 2013, 11:58am

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 · March 16, 2013, 11:02am

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:


* {
       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 · March 16, 2013, 11:34am

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 · March 18, 2013, 8:01am

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

PaulOB · March 18, 2013, 9:26am

Hi,

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

donboe · March 18, 2013, 9:35am

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?

PaulOB · March 18, 2013, 9:49am

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 · March 18, 2013, 9:55am

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 · April 12, 2013, 7:40am

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

PaulOB · April 12, 2013, 4:00pm

Hi,

You probably need something roughly like this:


#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 · April 13, 2013, 8:32am

Hi Paul. Works great. Thank you so much.