Just start to try to make sticky footer but it doesn't work. I'm a new learner, try to use the example but still does not working. I try to change it to fixed but it not being sticky. basicly this is my code
my html and css
.container{
margin: 0 auto;
width: 90%;
overflow: auto;
clear: both;
html,body{
height: 100%;
}
#wrap{
min-height: 100%;
margin-bottom: -80px;
}
#wrap::after{
content: "";
display: block;
}
footer,#wrap::after{
height: 80px;
}
<body>
<div id="wrap">
<header class="main-header></header>
<div class="container"></div>
</div> <!-- /#wrap -->
<footer></footer>
</body>
can someone help me with this??
section
{
height:100vh;
width:100%;
}
.section1
{
background:red;
}
.section2
{
background:blue;
}
.section3
{
background:green;
}
.footer-wrapper
{
width:100%;
height:10vh;
background-color: black;
position:sticky;
bottom:0%;
left:0%;
color:white;
}
<section class="section1 wrapper"></section>
<section class="section2 wrapper"></section>
<section class="section3 wrapper"></section>
<footer class="footer-wrapper">
<h1>Footer Text</h1>
</footer>
You had some typos. You missed to close class property. Change this in HTML
<header class="main-header></header>
switch it to
<header class="main-header"></header>
...and in your css you forgot to close class container
.container{
margin: 0 auto;
width: 90%;
overflow: auto;
clear: both;
change to
.container{
margin: 0 auto;
width: 90%;
overflow: auto;
clear: both;
}
This is your code corrected. I've added the text "TEST" to the footer to make it visible.
.container{
margin: 0 auto;
width: 90%;
overflow: auto;
clear: both;
}
html,body{
height: 100%;
}
#wrap{
min-height: 100%;
margin-bottom: -80px;
}
#wrap::after{
content: "";
display: block;
}
footer,#wrap::after{
height: 80px;
}
<body>
<div id="wrap">
<header class="main-header"></header>
<div class="container">
</div>
</div> <!-- /#wrap -->
<footer>TEST</footer>
</body>
Related
How to only make #content scrollable but keep #header and #sidebar fixed?
And is flexbox the best way to do it?
https://jsfiddle.net/3pnj1k5b/
html,
body {
margin: 0;
}
#page-app {
display: flex;
height: 100%;
background: red;
}
#sidebar {
width: 200px;
background: blue;
}
#header {
height: 60px;
background: pink;
}
#body {
flex: 1;
background: green;
}
#content {
overflow: auto;
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content">
content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>
It's position:fixed that fixes element to their position. It was basically what I've added.
html,
body {
margin: 0;
}
#page-app {
display: flex;
height: 100%;
background: red;
}
#sidebar {
position: fixed;
height: 100%;
width: 200px;
background: blue;
z-index: 2
}
#header {
height: 60px;
background: pink;
position: fixed;
padding-left: 200px;
width: 100%;
z-index: 1;
}
#body {
flex: 1;
background: green;
}
#content {
overflow: auto;
margin-left: 200px;
margin-top: 60px;
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content">
content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b content
<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>
Make the html,body height: 100%;. Then add a max-height to #page-app. Then make #sidebar and #header position: sticky;. Finally, just set the height of #content to be 100% minus the height of the header. In your case I used a calc to set that height. See below:
html,
body {
margin: 0;
height: 100%;
}
#page-app {
display: flex;
max-height: 100%;
background: red;
}
#sidebar {
width: 200px;
background: blue;
position: sticky;
}
#header {
height: 60px;
background: pink;
position: sticky;
}
#body {
flex: 1;
background: green;
}
#content {
overflow: auto;
height: calc(100% - 60px);
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content"> content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>
Make the #header position: sticky and the #body scrollable with overflow-y: scroll;
Codepen here
html,body{
margin:0;
height: 100%;
position: relative;
}
#page-app{
display:flex;
height:100%;
background:red;
overflow-y: hidden;
}
#sidebar{
width:200px;
height: 100%;
background:blue;
}
#header{
height:60px;
background:pink;
position: sticky;
top: 0;
}
#body{
flex:1;
background:green;
overflow-y: scroll;
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content">
content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>
I'm trying to rearrange 3 divs when device width is below 900px. They are arranged as three columns (2 floating divs and main one in the middle) and i don't know how to make them be 2 columns and third div below them (Image shows what i'm aiming at).
Thank you in advance :)
Adding code as you asked :) here is html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header></header>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
</body>
</html>
and here is css
#container{
width: 90%;
margin: 0px auto 0px auto ;
}
header{
width: 100%;
height: 200px;
background-color: blue;
}
#left{
float: left;
width: 20%;
height: 500px;
background-color: orange;
}
#right{
float: right;
width: 20%;
height: 500px;
background-color: green;
}
#middle{
width: 80%;
background-color: red;
height: 500px;
}
if i make right div float:none then it moves the middle div
You need to use media queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Enjoy
With media queries and flex.
Here is a snippet, (click on run then full screen).
<div class="flex">
<div class="sub c">1</div>
<div class="sub c">2</div>
<div class="doge c">3</div>
</div>
.flex{
display: flex;
flex-wrap: wrap;
}
.c{
height:20px;
width:20px;
border: 1px solid green;
box-sizing: border-box;
}
#media(max-width:600px){
.sub{
width: 50%;
}
.doge{
width: 100%
}
}
<div class="flex">
<div class="sub c"></div>
<div class="sub c"></div>
<div class="doge c"></div>
</div>
Welcome to the world of {in an ominous voice} RESPONSIVE DESIGN ! ,
To perform what you are trying to do you will need to explore Media Queries.
Here is an example of what you are trying to do: JSFiddle
HTML
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
<div class="bottom">
Bottom content flexible width
</div>
</div>
CSS
.container {
height: 100px;
overflow: hidden;
}
.left {
float: left;
background: #00FF00;
width: 25%;
overflow: hidden;
height: 100%;
}
.right {
display: inline-block;
width: 50%;
background: #0000ff;
height: 100%;
}
.bottom {
float: right;
background: #ff0000;
display: inline-block;
width: 25%;
height: 100%;
}
#media only screen and (max-width: 900px) {
.container {
height: auto;
overflow: hidden;
}
.left {
float: left;
background: #00ff00;
width: 25%;
overflow: hidden;
height: 100px;
}
.right {
float: none;
width: 75%;
background: #0000ff;
height: 100px;
}
.bottom {
position: relative;
float: none;
background: #ff0000;
width: auto;
overflow: hidden;
height: 50px;
display: inherit;
}
}
Good luck!
It would be helpful to see your sourcecode to tell you why it has not worked. At least you could describe it in more detail. Otherwise I would suspect that clear: both could maybe help you here by redefining a div-class in a media-query. At least this has worked for me.
As an example you could just attach float: left for the left column then the middle column would be following on the right side. By redefining the right-column (class) with clear: both the right-column would then be a footer. This is just an example and would not be the best solution indeed.
Here's my take on it.
/* Styles go here */
body,html{
margin: 0;
padding: 0;
height:100%;
}
.wrapper{
height:100%;
width:100%;
padding: 20px;
}
.div1{
height:100%;
width:30%;
float:left;
background-color:orange;
}
.div2{
height:100%;
width:30%;
float:left;
margin-left:2%;
background-color:red;
}
.div3{
height:100%;
width:30%;
margin-left:2%;
float:left;
background-color:green;
}
#media(max-width:900px){
.wrapper{
height:100%;
width:100%;
clear:both;
}
.div1{
height:70%;
width:49%;
float:left;
background-color:orange;
}
.div2{
height:70%;
width:49%;
float:left;
background-color:red;
}
.div3{
height:30%;
width:100%;
float:left;
margin:20px 0 20px 0;
background-color:green;
}
}
<div class="wrapper">
<div class="div1"><p></p></div>
<div class="div2"><p></p></div>
<div class="div3"><p></p></div>
</div>
I'm creating a website that has the following setup:
<html>
<body>
<div class="wrapper">
<div class="wrapper_devider">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</div>
</body>
</head>
The css is as following:
.wrapper{
margin: 0 auto;
max-width: 1500px;
}
.wrapper_devider{
width:60%;
padding:0 20%;
}
#header{
float: left;
width: 100%;
}
.slider{
display:block;
float:left;
width:100%;
background-color:#0000FF;
height:150px;
}
#container{
float: left;
width: 100%;
}
.sidebar{
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer{
display:block;
float: left;
width: 100%;
}
The .wrapper has a fixed width of 1500px and the rest is done with %.
The thing I can't seem to fix is that I want the slider to be full width.
I have tried to set the width if the .slider to 1500px but it only expands to the right.
Can anybody see what I do wrong?
M.
The wrapper has a max-width of 1500, this is different then a fixed width, this would look like
width: 1500px;
Even if you set the width to 1500, it still won't work because your slider element is inside your divider.
I would recommend the following layout:
HTML
<body>
<div class="wrapper">
<div class="wrapper_divider">
<div id="header">header</div>
</div>
<div class="slider">slider</div>
<div class="wrapper_divider">
<div class="container">container</div>
<div class="sidebar">sidebar</div>
<div class="footer">footer</div>
</div>
</div>
</body>
CSS
.wrapper{
margin: 0 auto;
width: 1500px;
}
.wrapper_divider{
width:60%;
padding:0 20%;
}
#header{
float: left;
width: 100%;
}
.slider{
display:block;
float:left;
width:100%;
background-color:#0000FF;
height:150px;
}
#container{
float: left;
width: 100%;
}
.sidebar{
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer{
display:block;
float: left;
width: 100%;
}
I've made an example of how it would look: http://jsfiddle.net/zon1d0gz/
OPTIONS
Move Slider outside of .wrapepr.
Make .wrapper 100% width and add new internal div of 60%.
If you cannot move the slider then make it position:absolute and offset the .wrapper with padding.
.wrapper {
position:relative;
margin: 0 auto;
max-width: 1500px;
padding-top:150px;
}
.wrapper_devider {
width: 60%;
padding: 0 20%;
}
#header {
float: left;
width: 100%;
}
.slider {
position:absolute;
left:0;
top:0;
display: block;
float: left;
width: 1500px;
background-color: #0000FF;
height: 150px;
}
#container {
float: left;
width: 100%;
}
.sidebar {
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer {
display: block;
float: left;
width: 100%;
}
<div class="wrapper">
<div class="wrapper_devider">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</div>
Your .wrapper class has max-width:1500px. This is an upper limit, I think you want: width:1500px.
.wrapper{
width: 1500px;
display: inline-block;
height: 100%;
}
Also wrapper_devider is set to 60%, so the slider won't span the entire 1500px since the slider is nested within wrapper_devider. I would remove that div entirely, you don't need it.
<body>
<div class="wrapper">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</body>
Here's the solution with jsfiddle
I'm trying to create a fluid layout site which also has a left sidebar with the following properties:
It doesn't scroll when the main content does
It takes up the full height of the page
The only layout I have seen is this one: http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/
HTML
<div id="page">
<header id="sidebar">
//SIDEBAR CONTENT HERE
</header>
<article id="contentWrapper">
<section id="content">
//CONTENT HERE
</section>
</article>
</div>
CSS
html {
overflow: hidden;
}
#sidebar {
background: #eee;
float: left;
left: 300px;
margin-left: -300px;
position: relative;
width: 300px;
overflow-y: auto;
}
#contentWrapper {
float: left;
width: 100%;
}
#content {
background: #ccc;
margin-left: 300px;
overflow-y: auto;
}
However I think this is a poor solution because not only does it require negative margins but it also requires javascript.
Is there a better way to achieve this?
Demo
css
#sidebar {
position:fixed;
height:100%;
width: 300px;
background-color: #ccc;
overflow-y: auto;
}
#contentWrapper { /* not using margin */
box-sizing:border-box;
background-color:#eee;
position:absolute;
left:300px;
width:calc(100% - 300px);
min-height: 100%;
}
#contentWrapper { /* using margin */
box-sizing:border-box;
background-color:#eee;
margin-left: 300px;
/*position:absolute;
left:300px;
width:calc(100% - 300px);*/
min-height: 100%;
}
html,body,#page {
width: 100%;
height: 100%;
}
You can do something like this: http://jsfiddle.net/9U2U4/
Demo with lot of Text: http://jsfiddle.net/9U2U4/1/
CSS:
html, body {
height: 100%;
}
body {
margin:0;
padding:0;
}
#page {
height: 100%;
}
#sidebar {
position: fixed;
left:0;
top:0;
bottom:0;
width: 30%;
background-color: #eee;
}
#contentWrapper {
margin-left: 30%;
min-height: 100%;
position: relative;
background: #ccc;
}
#content
{
padding: 10px;
}
HTML:
<div id="page">
<header id="sidebar">// Sidebar</header>
<article id="contentWrapper">
<section id="content">
<p>Text</p>
</section>
</article>
</div>
I have a responsive layout, which works perfectly in FireFox, Chrome and Opera but not in IE. It stretches vertically and horizontally in those 3 modern browsers but not in IE. It's based on display:table css technic.
This my code:
<div id="container">
<div id="header"> header header header header header </div>
<div id="contentWraper">
<div id="content">
<div id="columnsWraper">
<div id="leftPanel">left panel <br /> left panel <br /> left</div>
<div id="rightPanel">right panel</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
CSS:
html, body { height: 100%; background: gray; margin: 0; padding: 0; }
#container { display: table; height: 100%; width: 100%;}
#header { height: 0%; display: table-row;}
#contentWraper {height: 100%; background: lightgray; display: table-row;}
#content {height: 100%; background: lightgray; display: table; width: 100%;}
#columnsWraper {height: 100%; display: table-row;}
#footer { height: 0%; display: table-row;}
#leftPanel { background: wheat; width: 100px; display: table-cell; }
#rightPanel { background:yellowgreen; display: table-cell; }
http://jsfiddle.net/wftHq/6/
It works also in IE until I use nested divs with "display:table" style. I had to use it, otherwise "header" was only 100px wide (the width of "leftPanel").
Only in IE "leftPanel" and "rightPanel" doesn't fill the 100% height. Is there a way to fix it in IE ? Does anyone know how to change my code to work in IE. I'm trying to avoid using javaScript.
Without using "table style" and works on IE:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<div id="header"> header header header header header </div>
<div id="contentWraper">
<div id="content">
<div id="columnsWraper">
<div id="leftPanel">left panel <br /> left panel <br /> left</div>
<div id="rightPanel">right panel</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
CSS:
html,body {
background:gray;
margin:0;
padding:0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#container {
height:100%;
position:absolute;
width:100%;
}
#header {
background:#FF1493;
top:0;
}
#footer {
background:#87CEEB;
bottom:0;
}
#header, #footer {
position:absolute;
width: 100%;
height: 1.5em;
}
#contentWraper {
position: absolute;
background: black;
width: 100%;
top: 1.5em;
bottom: 1.5em;
}
#content {
background:lightgray;
height:100%;
width:100%;
}
#leftPanel {
vertical-align: top;
background:#F5DEB3;
width:100px;
display: inline-block;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
bottom: 0;
}
#rightPanel {
background:#9ACD32;
display: inline-block;
height: 100%;
left: 100px;
right: 0;
position: absolute;
}