I want to create a border layout for a web-app, where there is a fixed size header, footer, a sidebar, and the main center content that expands to fill the remaining space.
Think of it like your browser, where the toolbars and status-bar have a fixed size, the sidebar can change size, but the website in the center expands to fill the remaining size.
To clarify, I want to specify the height of the entire design in pixels, for example 600px. Then I want the sidebar and the center <div> tags to expand down to fill the space available, even if their contents aren't large enough to fill the space.
The web-browser analogy can be used here too. Even if the page you are looking at in the browser isn't taller than the browser window, the browser doesn't resize.
Is there any way to do this with CSS?
div { border : 1px solid #d3d3e3 }
#north { margin:0; padding:1em; }
#south { margin:0; padding:1em; }
#east { margin:0; padding:1em; width:6em; height:22em; float:left; margin-right:1.1em }
#west { margin:0; padding:1em; width:6em; height:22em; float:right; margin-left:1.1em }
#center { margin:0; padding:1em; padding-bottom:0em; }
#center:after { content:' '; clear:both; display:block; height:0; overflow:hidden }
<div id="north">North</div >
<div id="east">East</div>
<div id="west">West</div>
<div id="center">Center</div>
<div id="south">South</div>
Live link: http://jsfiddle.net/marrok/dGw6K/2/
The CSS table layout can handle this nicely.
.borderLayout {
display: table;
width: 100%
}
.borderLayout .top {
display: table-row;
}
.borderLayout .left {
display: table-cell;
vertical-align: middle;
width: 10%;
}
.borderLayout .center {
display: table-cell;
vertical-align: middle;
}
.borderLayout .right {
display: table-cell;
vertical-align: middle;
width: 10%;
}
.borderLayout .bottom {
display: table-row;
}
JSFiddle
I couldn't manage to find an answer to this question that worked for me, so I tried various attempts. This is a simple solution I managed to put together using flexbox.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/*div { border : 1px solid #d3d3e3 }*/
html { height: 100%; }
body { height: 100%; }
.borderLayout {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
height: 100%;
}
.borderLayout .top {
width: 100%;
}
.borderLayout .middle {
flex-grow: 1;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
}
.borderLayout .middle .side {
}
.borderLayout .middle .center {
vertical-align: middle;
flex-grow: 1;
}
.borderLayout .bottom {
width: 100%;
}
</style>
</head>
<body>
<div class="borderLayout" style="width: 100%; height: 100%; background-color: cyan;" >
<div class="top" id="north" style="height: 150px; background-color: red;">North</div >
<div class="middle" style="background-color: magenta;" >
<div class="side borderLayout" id="west" style="width: 10%; background-color: yellow;">
<div class="top" style="height: 100px; background-color: #FF8000;">West 1</div>
<div class="middle">West 2</div>
<div class="bottom" style="height: 75px; background-color: #FF8080;">West 3</div>
</div>
<div class="center" id="center" style="background-color: white;">Center</div>
<div class="side" id="east" style="width: 20%; background-color: green;">East</div>
</div>
<div class="bottom" id="south" style="height: 50px; background-color: blue;">South</div>
</div>
</body>
</html>
The method you refer to sounds like a job for footer stick - this is old already, but works a charm still ... the man in blue - footerStickAlt
Similar question here.
And I'm sure if you use the same criteria in that question and the question linked in that to run a search, you'll come up with more.
try flexbox, works with firefox and webkit
http://www.html5rocks.com/en/tutorials/flexbox/quick/
the current implementation is not updated, but it is good enough
but you can probably do this with tables (that are similar to the flexbox)
hope this helps
Related
So, I have three divs:
<div class="takeremaining">
<div class="centeredcontent">
This is my centered content
</div>
</div>
<div class="dynamicallyallocated">
This is my dynamic content
</div>
I'd like the rightmost div dynamicallyallocated to be dynamically sized based on the content using display: inline-block; and the other div takeremaining to take the remaining space in the parent div. I've tried this with my css:
.takeremaining {
display: inline-block;
width: 100%;
float: left;
background-color: #0000ff;
}
.centeredcontent {
display: table;
margin: 0 auto;
background-color: #00ffff;
}
.dynamicallyallocated {
display: inline-block;
float: right;
background-color: #00ff00
}
but, as you can see by this JSFiddle demo, the div dynamicallyallocated is bumped beneath takeremaining. I believe this is because of width: 100%; in takeremaining, but I'm not sure how to give it a dynamic width based on the conditional width of dynamicallyallocated. What would you suggest?
Here is a solution for you.
.container {
display: table;
width: 100%;
}
.takeremaining {
display: table-cell;
width: 100%;
text-align: center;
background-color: #0000ff;
}
.centeredcontent {
display: inline-block;
background-color: #00ffff;
}
.dynamicallyallocated {
display: table-cell;
width: 0;
background-color: #00ff00;
white-space: nowrap
}
<div class="container">
<div class="takeremaining">
<div class="centeredcontent">
This is my centered content
</div>
</div>
<div class="dynamicallyallocated">
This is my dynamic content
</div>
</div>
I have a container and 2 divs inside:
1 header (whose height should be free if I add some lines) and an userList.
I want the userList to have the height of the container : any idea how ?
(no JS solution, better if no position: asbolute used)
#container {
width: 300px;
height:400px;
background-color: #FF0000;
}
#header{
background-color: #FFF500;
}
#userList {
background-color: #00FF00;
width:290px;
height: 100%;
overflow-y:auto;
}
<div id="container">
<div id="header">line1<br>line2<br>line3</div>
<div id="userList">
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
</div>
</div>
Right now, your .userList have the same height as his container, but with the yellow box it goes down. The best solution with your requirements is as this:
Your requirements:
no JS solution, better if no position: asbolute used)
#container {
width: 300px;
height:400px;
background-color: #FF0000;
}
#header{
width: 300px;
background-color: #FFF500;
}
#userList {
background-color: #00FF00;
width:290px;
height: 100%;
overflow-y:auto;
}
<div id="header">line1<br>line2<br>line3</div>
<div id="container">
<div id="userList">
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
</div>
</div>
The only I need is take out the #header division and give it the same with as #container. By this mode, #container and #userList have got the same height.
One good way of doing this is with display: flex and flex-direction properties.
This way, you can have a header with flexible height, and a userlist that is always contained within the container. This way, you also don't have to change your markup and move the header outside your container.
Demo
Full code:
#container {
width: 300px;
height:400px;
background-color: #FF0000;
display: flex;
flex-direction: column;
}
#header{
background-color: #FFF500;
}
#userList {
background-color: #00FF00;
width:290px;
height: 100%;
overflow-y:auto;
}
<div id="container">
<div id="header">line1<br>line2<br>line3</div>
<div id="userList">
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
</div>
</div>
Over the years I've tried lot of different techniques, but I still can't find a way, where I could create a footer, that is dynamically changes height, depending on the content and if the site have less content, the footer goes down to the bottom of the page.
I've tried to play with the ::after pseudo element:
footer::after {
content: '';
position: absolute;
background: red; //just test
width: 100%;
height: 99px;
}
And I found a way, where you can do this to look nice, but you need to set the height of the footer. But if you want a real responsive UI, you can not set the height of the footer :)
I hope anyone knows the secret, how to create a dynamic footer.
What you want is sticky footer with fluid height.
In older browsers you'll need some JavaScript.
In modern browser you can use css table display types:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
</body>
</html>
I took this example from:
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
EDIT: Now I see you want to expand the footer, not the content. I'm leaving the original for bypassers with sticky footer question as it is more common version.
Try this version instead:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<!-- these two line differ from the previous example -->
<section class="Row"><h2>Awesome content</h2></section>
<footer class="Row Expand"><h3>Sticky footer</h3></footer>
</body>
</html>
This can easily be done with CSS2.1 (but not in IE7-). The main trick is the following:
.container {
display: table;
height: 100%;
width: 100% /* mimics `display: block` */
}
.footer {
display: table-footer-group;
}
/* to add padding use the below or wrapper/inner wrapping element combo. */
.footer:before, .footer:after {
padding: 1em;
content: '';
}
In modern browsers, it can also be done with FlexBox, which is probably more appropriate theoretically, but less supported yet.
It is sticky footer, please try this:
HTML
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left Sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
<div id="footer">Footer Section</div>
</div>
CSS
/*sticky footer style*/
html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*for ie6*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/* equal to the footer's height*/
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*The footer' height*/
background: #6cf;
clear:both;
}
/*=======主体内容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}
Pleas view the demo. Other methods, you can click here.
And you can use the CSS3 flexbox Module, Like this:
HTML
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
CSS
header,section,footer {
display: block;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
body {
width: 100%;
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
section {
-moz-box-flex:1;
-webkit-box-flex:1;
-ms-flex:1;
-webkit-flex:1;
flex:1;
background: hsla(250,20%,30%,0.9);
}
header {
background: orange;
}
footer {
background: green;
}
Please view the demo. About the css3 flexbox module.
I want to make a one Column Layout with 3 section
Section 1: Header
Section 2: A Content Section that stretchs from beneth the header to the beginning of the footer, which has it's content centered vertically and horizontally within itsel
Section 3: Footer that always resides at the bottom of the browser window.
The Problem:
I can't get the content div to strech to the beginning of the footer/bottom div. If I enter height:100% it automatically stretches till the end of the whole page.
Also would like to center the content inside this middle div vertically and horizontally - though I have not yet attempted to do so.
Also don't understand why the background of the header text is not in color. even though the subheader divs are encapsulated by the header div which has background-color defined.
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. |
<span="address">Website Information</span> — info#info.com
</span>
</div>
<div class="bottom-right">
<span class="openinghours">Open by Appointment</span><span class=""> sponsored by XYZ</span>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>
2018 update
use flexbox or css grid. Here is a flexbox example. Css grid could be even simpler, but support is pretty low still:
body, html { padding: 0; margin: 0; }
header { background: #faa; }
article { background: #afa; }
footer { background: #aaf; }
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
article {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
<div class="page">
<header>header content</header>
<article>main content</article>
<footer>footer content</footer>
</div>
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;
}
In order for #inner to stay centered vertically even with multi-line content, you'll need to use Javascript/jQuery. Below is an example script that "pulls up" #inner just the right amount to be centered.
var mrgntop = -Math.floor($("#inner").height() / 2);
$("#inner").css({"margin-top":mrgntop});
<table> is what you need to use in this case. The HTML will look like this, basically:
<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>
Example CSS:
html, body, .wrapper {
height: 100%;
}
.header {
height: 100px; /*This value can be anything*/
}
.content {
text-align: center;
}
.footer {
height: 100px;
}
Demo: jsFiddle.
Note how the content is centered both vertically and horizontally.
Hope that helped!
I need the following in a header of fixed width:
A div of varying width floated left.
A div of varying width floated right.
An h2 centered between them that takes up any remaining space.
The floated divs contain content that may vary in size.
I've tried various approaches but they have all failed. I know one solution is to absolutely position the outer divs, then stretch the h2 out for the full width and center the text so it sits centrally, but there must be a nicer way to do this.
A basic jsFiddle example with minimal markup.
HTML
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
<h2>H2</h2>
</div>
CSS
#container {
border:1px solid #999;
}
#left {
float:left;
}
#right {
float:right;
}
h2 {
text-align:center;
margin:0;
}
You could use display: inline-block instead of float, and then use CSS calc to get the right width for the middle div:
HTML:
<div id="wrapper">
<div id="one"></div><div id="two"></div><div id="three"></div>
</div>
CSS:
#wrapper {
min-width: 300px;
}
#one, #two, #three {
display: inline-block;
height: 300px;
}
#one {
background: lightgreen;
width: 100px;
}
#two {
background: lightblue;
width: 100%;
width: calc(100% - 300px);
width: -webkit-calc(100% - 300px);
width: -moz-calc(100% - 300px);
}
#three {
background: lightgreen;
width: 200px;
}
jsFiddle Demo
You can then put the h2 inside the the middle div, in this case #two.
Considering the following HTML:
<div id="parent">
<div id="left">Left</div>
<h2>Heading</h2>
<div id="right">Right</div>
</div>
CSS Code:
#parent {
width: 80%;
margin: auto;
display: table;
}
#parent div, #parent h2 {
display: table-cell;
}
#left, #right {
width: 50px;
}
Demo: http://jsfiddle.net/MAhmadZ/pMfLx/
try this out
i think it may solve your problem
<style type="text/css">
div{
display: inline-block;
vertical-align: top;
height: 50px;
border: 1px solid red;
position: static;
}
#one{
float: left;
width: 100px;
}
#three{
float: right;
width: 100px;
}
</style>
<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid red;">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<script type="text/javascript">
var spaceLeft = document.getElementById("one").offsetWidth;
var spaceRight = document.getElementById("three").offsetWidth;
var totalSpace = document.getElementById("outerDiv").offsetWidth;
document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>