Make 100% height block with vertical text - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Text

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Text

Description

Make 100% height block with vertical text

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.wrapper {<!--from w ww  .j a  va2s  .com-->
   margin:2em;
   position:relative;
   padding-left:3em;
   background:Chartreuse;
}

.wrapper header {
   display:block;
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   width:3em;
   overflow:hidden;
   white-space:nowrap;
}

.wrapper header h1 {
   -moz-transform-origin:0 51%;
   -moz-transform:rotate(-91deg) translate(-51%, 51%);
   -webkit-transform-origin:0 51%;
   -webkit-transform:rotate(-91deg) translate(-51%, 51%);
   -o-transform-origin:0 51%;
   -o-transform:rotate(-91deg) translate(-51%, 51%);
   -ms-transform-origin:0 51%;
   -ms-transform:rotate(-91deg) translate(-51%, 51%);
   transform-origin:0 51%;
   transform:rotate(-91deg) translate(-51%, 51%);
   position:absolute;
   top:0;
   bottom:0;
   height:3em;
   margin:auto;
   font-weight:bold;
   font-size:2em;
   line-height:3em;
}

.wrapper article {
   display:inline-block;
   width:26%;
   padding:2em 2em 2em 0;
   vertical-align:middle;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -ms-box-sizing:border-box;
   -o-box-sizing:border-box;
   box-sizing:border-box;
}
</style> 
 </head> 
 <body> 
  <section class="wrapper"> 
   <header> 
    <h1>Test</h1> 
   </header> 
   <article>
     A short snippet showing that the 
    <code>&lt;header&gt;</code> element is centered vertically... 
   </article> 
   <article>
     A short article snippet... 
   </article> 
   <article>
     A short article snippet... 
   </article> 
   <article>
     A short article snippet... 
   </article> 
  </section> 
  <section class="wrapper"> 
   <header> 
    <h1>Test</h1> 
   </header> 
   <article>
     A short snippet showing that the 
    <code>&lt;header&gt;</code> element is centered vertically even with a longer snippet length. 
   </article> 
   <article>
     A short article snippet... 
   </article> 
   <article>
     A short article snippet... 
   </article> 
   <article>
     A short article snippet... 
   </article> 
  </section> 
  <section class="wrapper"> 
   <header> 
    <h1>Test</h1> 
   </header> 
   <article>
     A short snippet showing that the 
    <code>&lt;header&gt;</code> element is centered vertically... 
   </article> 
   <article>
     A short article snippet... 
   </article> 
   <article>
     A short article snippet... 
   </article> 
   <article>
     A short article snippet... 
   </article> 
   <article>
     Items that don't fit on the same line simply wrap. The 
    <code>&lt;header&gt;</code> repositions accordingly. 
   </article> 
  </section>  
 </body>
</html>

Related Tutorials