SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically centering a div with equall height columns

    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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?

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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!

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi ronpat. This is the page i am using it. Hope this give you some idea.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

  9. #9
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  11. #11
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  12. #12
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  14. #14
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. Works great. Thank you so much.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •