I'm trying to figure out how to create a layout with:
- a fixed height header and not fixed
- two sidebars (one in each side)
- a column between the sidebars
- a fixed height footer sticky at the bottom of the page and that moves accordingly to the content (here is the problem, maybe)
I've seen many similar questions, but none of them seen to work with 3 columns.
I'm not sure, but I think it's something related to floating the columns of the content.
Here's the HTML code:
<div id="wrapper">
<div id="header">Header is ok</div>
<div id="container">
<div id="column-left"></div>
<div id="content"></div>
<div id="column-right"></div>
</div>
<div id="footer"></div>
Here's the CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
height: 100%;
position:relative;
}
#header {
background: green;
height: 60px;
position: absolute;
width: 100%;
}
#container {
margin: 0 auto;
width: 80%;
padding-top: 60px; /* size of header */
padding-bottom: 100px; /* size of footer */
background: red;
height: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
#column-left {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#column-right {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#content {
float: left;
width: 60%;
min-height: 100%;
background: pink;
}
Here's an example of what's happening when I add some content:
http://jsfiddle.net/Lzp67xyu/
See this fiddle
Change positioning of #footer to relative and add clear:both to #footer.
That is, the CSS for #footer would be like
#footer {
clear: both;
position:relative;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
According to the docs
The clear property specifies on which sides of an element where
floating elements are not allowed to float.
Putting a margin-bottom on the container with your columns in it will keep the space below it where the footer would be.
.columnncontainer{
width:80%;
margin-bottom:50px;
background-color:yellow;
display:inline-block;
}
Here's a JSFiddle I came up with as example:
http://jsfiddle.net/y5xwop8h/1/
Related
I need all divs to be 100% document height. It works till some of them has a top margin. In this case remaining divs loses its full height.
How can I stretch all div's height to full document height, regardless of margin of any of them?
* {
.margin: 0;
}
html {
background: red;
height: 100%;
}
body {
max-width: 1366px;
background: blue;
height: 100%;
}
#divleft {
float: left;
background: lightblue;
width: 40%;
height: 100%;
}
#divmiddle {
float: left;
margin-top: 25px;
background: lightgreen;
width: 40%;
height: 100%;
}
#divright {
float: right;
background: green;
width: 20%;
height: 100%;
}
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
Here is the fiddle
You don't necessarily need height: 100% for your divs to be full height. You can achieve this layout, making the divs fully dynamic, with CSS flexbox.
All you need is display: flex on the container.
You can get rid of all float rules and don't need to use calc().
html {
background: red;
height: 100%;
}
body {
display: flex; /* NEW */
max-width: 1366px;
background: blue;
height: 100%;
}
#divleft {
background: lightblue;
width: 40%;
}
#divmiddle {
margin-top: 25px;
width: 40%;
background: lightgreen;
}
#divright {
width: 20%;
background: green;
}
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
revised fiddle
An initial setting of a flex container is align-items: stretch. This means that child elements of the container (aka "flex items"), will consume the free space in the cross-axis, which in this case is vertical / height.
You can use CSS calc() function, like:
#divmiddle{
margin-top: 25px;
height: calc(100% - 25px);
}
Have a look at the snippet below (let me know if this works for you):
html{
background:red;
height:100%;
}
body{
max-width:1366px;
background:blue;
height:100%;
margin: 0;
}
#divleft{
float:left;
background:lightblue;
width:40%;
height:100%;
}
#divmiddle{
float:left;
margin-top:25px;
background:lightgreen;
width:40%;
height:calc(100% - 25px);
}
#divright{
float:right;
background:green;
width:20%;
height:100%;
}
<body>
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
</body>
Hope this helps!
Just remove margin property from middle div..
#divmiddle{
float:left;
background:lightgreen;
width:40%;
height:100%;
}
You can simply deduct the margin percentage from the height. Instead of height: 100%, use something like width: 98%; height: 98%; margin: 1%; or width: 23%; height: 23%; margin: 1%;, etc.
I have big doubt about fixed, relative , absolute container
I have a css code like this
.header {
position:fixed;
width:100%;
height:60px;
}
.page, .footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
}
and my html code like this...
<div class="header">--fixed content--</div>
<div class="page">--page content</div>
<div class="footer">--footer content--</div>
I have used bootstrap for button styles. problem is the header div is fixed but the content inside the page & footer goes over the header content. When I remove position:relative; from page & footer css it works fine. But also bootstrap buttons goes still goes up.
try this:
.header {
position:fixed;
width:100%;
height:60px;
background: black;
color: white;
top: 0;
left: 0;
z-index: 10;
}
.page {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
background: #999;
height:500px;
color: white;
padding-top: 60px;
margin: auto;
}
.footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
background: #666;
height:100px;
color: white;
margin: auto;
}
Fiddle Example
Adding a z-index will keep your header always on top of other content. You can change its value as per your content.
add the padding-top to your '.page' to avoid any overlapping of header on the body content.
You should be using like this:
.header {
position:fixed;
width:100%;
height:60px;
z-index: 99999999;/*adding higher index value than other divs*/
/* This will ensure the header div always on top of other divs */
}
.page{
position: relative;
top: 61px;/* plus 1px height as of .header or use as per your requirement */
/* but at least this should be 60px to show your .page div */
}
Then, just other divs you don't need to define the top value for this issue(overlaps).
I have been looking for an answer to this question but have not found anything. I have searched stack overflow and other resources. The question has been asked before and I have tried each of them the answers.
How can I get the div's to take up 100% of the vertical distance between the header and footer?
Here's my code:
HTML
<div class="page-wrap">
<header>This is the header</header>
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="main">Main</div>
</div>
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS
/* * {
margin: 0;
} */
html, body {
width: 100%;
height: 100%;
margin:0;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -80px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 80px;
}
.site-footer {
background: #265a88;
}
#left{
text-align:center;
color:white;
background-color: black;
height: auto !important;
height: 100%;
border: black dash;
float: left;
width: 20%;
min-height:100%;
overflow: scroll;
}
#right{
min-height:100%;
text-align:center;
color:white;
background-color: black;
height: 100%;
float: right;
width: 20%;
}
#main{
text-align:center;
color:white;
background-color: blue;
height: 100%;
border: black dash;
float: right;
width: 60%;
max-height:100%;
overflow: scroll;
}
header{
background-color: #265a88;
color:white;
text-align:center;
padding:5px;
}
You need to set the dimensions of container as such:
#container{
height: 100%
width: 100%
position: absolute;
}
However, in your case, you will have to set the height of the container so that it does not overflow and go over the footer.
In order for a child element to take 100% of the parent's height, the parent must have a set height (ie can't be a percent). This applies to all child elements besides the body tag, who's parent is html, and html set to 100% does provide a set pixel height for child elements. The easiest workaround for this is to use some javascript to calculate the height of a given parent element, and then set the child element accordingly. I am not aware of any pure css solution, that doesn't require some fiddling with properties such as line-height. As far as I know, this is a very common issue for web developers, and one which really depends on your flexibility of technology used and how hacked you want your css to look.
I have simple layout and I'm trying to expand div's height to given % so I can put later scalled background img using backgound-size.
In example I wanna have div1 expand to 69%.
Why it doesn't work and how to fix it?
Link: https://jsfiddle.net/mc6ecstr/
CSS:
body
{
color: white;
margin: 0px;
padding: 0px;
height: 1080px;
}
#container
{
width: 100%;
height: 100%;
}
#header
{
background-color: blue;
width: 100%;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-left: 1.5%;
height: 69%; /*doesnt work*/
}
#div2 {
background-color: green;
float: right;
width: 43.17%;
margin-right: 3.6%;
}
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
You need to give to the body and html and to his parent (#container) height: 100%;
CSS
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%; /* Add this */
}
#container
{
width: 100%;
height: 100%; /* Add this */
}
DEMO HERE
If you know the height of #header you can use calc(...) and absolute positioning to make the container fill the remaining space:
#container
{
width: 100%;
height: 100%;
position:absolute;
top:20px;
left:0px;
height:calc(100% - 20px);
}
In this example I've set the header to a fixed height of 20px, then offset container by the same amount.
Then set #div1's height accordingly to fill 69% of #container.
Fiddle: https://jsfiddle.net/GarryPas/mc6ecstr/2/
Working on a fullpage ("locked") design.
Here's what I'm working with:
http://jsfiddle.net/5yex5nfu/
<div id="wrapper">
<div id="navigation">
Nav
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
body {
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
background-color: lightblue;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
}
#main {
height: auto;
background: lightgreen;
}
I want the main div to fill out the rest of the "locked" div, with a %-value; whilst the footer and navigation hade assigned px-values.
Have seen a few solutions for my problem, but none of them seems to work. Have tried to set a %-value for every div, and it works, but as expected: The whole thing scales and messes up the layout.
For a pure css solution you can use calc to calculate the height of main
Example http://jsfiddle.net/5yex5nfu/2/
Just change #main height from auto to this
#main {
height: calc(100% - 140px);
}
Read more about calc and a-couple-of-use-cases-for-calc
You can use just css, with display:table propriety!
http://jsfiddle.net/Monteduro/5yex5nfu/5/
#wrapper {
position: absolute;
top: 0;
left: 0;
background-color: lightblue;
display: table;
height: 100%;
width: 100%;
box-sizing: border-box;
padding:50px;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
display:table-row;
}
#main {
height: auto;
background: lightgreen;
display:table-row;
}