Geek Answers Handbook

How to make a div stretch its height between two other divs and center its contents

I want to create one 3-section column layout

Section 1: Header Section 2: a section of content that stretches from the beneth header to the start of the footer, which has its contents centered vertically and horizontally inside itel Section 3: The footer, which is always located at the bottom of the browser window.

Problem:

I cannot get the contents of a div to stretch it to the start of the footer. If I enter the height: 100% it automatically stretches to the end of the entire page.

I would also like to center the contents inside this middle div vertically and horizontally - although I have not tried to do this yet.

Also, I don’t understand why the background of the title text is not in color. even though subheader subkeys are encapsulated by a div heading that has a background color.

thanks!

http://jsbin.com/ixipug/1/edit

<!DOCTYPE html> <html> <head> <style type="text/css"> html { height: 100%; } body { height: 100%; margin-left: 20px; margin-top:0px; margin-bottom: 0px; } #containerHeaderContent { min-height:100%; height: auto; height: 100%; margin: 0 auto -1.5em; } .push { height: 1em; } .header { background-color: aqua; padding-top:20px; } .subheader-left { float:left; font-family: serif; font-size: 20px; text-align: left; } .subheader-right{ float: right; font-family: sans-serif; font-size: 12px; padding-right: 20px;} .middleSection { padding-top: 10px; clear:both; width:100%; height auto; background-color: #e8e7e7; } .bottom{ background-color: red; position: absolut; height: 1em; font-size: small; } .bottom-left { float: left; font: sans-serif; left: 20px; } .bottom-right { float: right; right: 15px; font-style: italic; color: #8e8e8e; font-size: 11px; } </style> <title>XYZ</title> </head> <body> <div id="containerHeaderContent"> <div class="header"> <div class="subheader-left">XYZ</div> <div class="subheader-right">LOREM</div> </div> <div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div> <div class="push"></div> </div> <div class="bottom"> <div class="bottom-left"> <span class="about"> <span class="bold">XYZ</span> is a project by XZY.&nbsp;&nbsp;&#124;&nbsp; <span="address">Website Information</span> &mdash; <a href="mailto: info@info.eu "> info@info.com </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span> </div> <div class="bottom-right"> <span class="openinghours">Open by Appointment</span><span class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sponsored by XYZ</span> </div> </div> </body> </html><!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> </body> </html>
+4
source share
2 answers

No need to use tables! Some simple css will do nicely.

DEMO: http://jsbin.com/azivip/2/edit

HTML Markup:

 <body> <div id="content"> <div id="header"> This is the header </div> <div id="inner"> This is the body </div> <div id="footer"> this is the footer </div> </div> </body>

CSS:

 body{ height:100%; padding:0px; margin:0px; } #content{ position:relative; bottom:0px; width:100%; height:100%; } #header{ position:relative; bottom:0px; width:100%; height:100px; /* Edit for height of header*/ background:#f00; } #inner{ width:100%; text-align:center; position: absolute; top: 50%; display: table-cell; vertical-align: middle; } #footer{ position:absolute; bottom:0px; width:100%; height:100px; /* Edit for height of footer */ background:#0f0; }

To keep #inner centered vertically even with multi-line content, you will need to use Javascript / jQuery. Below is an example script that "pulls up" #inner only the right amount to be centered.

 var mrgntop = -Math.floor($("#inner").height() / 2); $("#inner").css({"margin-top":mrgntop});
+5
source

<table> is what you need to use in this case. HTML will look like this:

 <table class = "wrapper"> <tr><td class = "header">I'm the header.</td></tr> <tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr> <tr><td class = "footer">I'm the footer.</td></tr> </table>

CSS example:

 html, body, .wrapper { height: 100%; } .header { height: 100px; /*This value can be anything*/ } .content { text-align: center; } .footer { height: 100px; }

Demo: jsFiddle . Notice how the content is centered both vertically and horizontally.

Hope this helps!

+1
source

More articles:


All Articles