I am trying to make a responsive website with a sticky footer. So far I have been able to achieve what I want with the following HTML and CSS up until the point if anything inside content expands the div, for example if there are several more products, the footer will float over the top of the content div. What I am trying to achieve is for the footer to keep getting pushed down by the content above it.
I've tried using margin 0 auto on the wrapper div which uses flex instead, however it doesn't seem to achieve the results I am looking for.
Can someone help me unblock myself, or advice what I should actually be doing?
Thank you
/* Desktop */
#media (max-width: 1480px) {
.content,
.header,
.footer {
width: 100%;
margin: 0 20px;
}
.border {
display: none;
}
.product {
width: 33.33% !important;
}
}
/* Tablet */
#media (max-width: 768px) {
.header,
.footer {
margin: 0 auto;
}
.product {
width: 100% !important;
}
}
/* Mobile */
#media (max-width: 360px) {}
/* Main */
.push {
height: 100%;
}
.wrapper {
display: flex;
justify-content: center;
}
.header,
.content,
.footer {
width: 1380px;
}
.header {
height: 100px;
background: green;
}
.content {
background: blue;
height: 100%;
}
.border {
width: 130px;
height: 100px;
float: left;
background: rebeccapurple;
}
.product {
width: 280px;
height: 519px;
float: left;
background: fuchsia;
}
.footer {
height: 200px;
margin-top: -200px;
background: greenyellow;
}
<body>
<div class="push">
<div class="wrapper">
<div class="header">
<div class="border"></div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="border"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="border"></div>
</div>
</div>
</div>
<div class="wrapper">
<div class="footer">
<div class="border"></div>
</div>
</div>
</body>
Updated:
position: sticky; won't do, since you need to have footer always on the bot part of the page no matter the height of the content. So, we get to plan B which is position: fixed; with bottom: 0; and width: 100%;, which makes footer be full-width fixed on bottom but without taking any actual space.
In order to make this work, you need to add a margin-bottom on the content div with the height of your footer. In that way, you "fake" the existence of footer, therefore displaying the whole content of content:
body {
margin: 0;
position: relative;
}
header {
min-height: 60px;
background: #222;
color: #fff;
display: flex;
align-items: center;
}
.content {
display: flex;
flex-wrap: wrap;
/* Insert the height of your footer element (mine is 60px) */
margin-bottom: 60px;
}
.product {
min-width: 200px;
min-height: 200px;
background: linear-gradient(45deg, #ccc, #ccc5);
}
footer {
position: fixed;
width: 100%;
bottom: 0;
height: 60px;
background: #252525;
color: #fff;
display: flex;
align-items: center;
gap: 10px;
}
<body>
<header>
<h2>This is the header.</h2>
</header>
<section class="content">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</section>
<footer>
<h2>This is the footer</h2>
<div class="info">Lorem Ipsum</div>
<div class="info">Lorem Ipsum</div>
<div class="info">Lorem Ipsum</div>
</footer>
</body>
try this approach:
style {
.flex-body {
display:flex;
width:100%;
height:100%; /* or use 100vh */
}
.flex-body .body {
flex-grow:1;
position:relative;
}
.flex-body .body .container {
position:absolute;
width:100%;
height:100%;
overflow-y:auto;
}
.flex-body .footer {
/* add footer styles here */
}
}
and inside your <body> tag:
<div class="flex-body">
<div class="body">
<div class="container"><!-- contents of container --></div>
</div>
<div class="footer"><!-- contents of footer --></div>
</div>
<head>
<style>
/* Desktop */
#media (max-width: 1480px) {
.main-wrapper, .content, .header, .footer {
width: 100% !important;
}
.border {
display: none;
}
.product {
width: 33.33% !important;
}
}
/* Tablet */
#media (max-width: 768px) {
.product {
width: 100% !important;
}
}
/* Mobile */
#media (max-width: 360px) {
}
/* Main */
body {
position: relative;
}
.main-wrapper, .header, .content, .footer {
width: 1380px;
}
.main-wrapper {
height: 100%;
margin: 0 auto;
}
.footer-wrapper {
clear: both;
height: 180px;
margin-top: -180px;
}
.header {
height: 100px;
background: green;
}
.content {
background: blue;
}
.footer {
height: 100%;
margin: 0 auto;
background: greenyellow;
}
.border {
width: 130px;
height: 100px;
float: left;
background: rebeccapurple;
}
.product {
width: 280px;
height: 519px;
float: left;
background: fuchsia;
}
</style>
</head>
<body>
<div class="main-wrapper">
<div class="header">
<div class="border"></div>
<div class="border"></div>
</div>
<div class="content">
<div class="border"></div>
<div class="product">
</div>
<div class="product">
</div>
<div class="product">
</div>
<div class="product">
</div>
<div class="border"></div>
</div>
</div>
<div class="footer-wrapper">
<div class="footer">
<div class="border"></div>
<div class="border"></div>
</div>
</div>
</body>
Related
I want divide my HTML Page into 4 different vertical sections .
I want each section to have a different background color, for that I used div but it each background color does not cover the sides of each section.
** My aspire end result:
I don't want to see the color red of the body background color in the html.
body {
background-color: red;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="intro">
<hr>
</div>
<div class="edu">
<hr>
</div>
<div class="Skills">
<hr>
</div>
<div class="end">
<hr>
</div>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-container>div {
margin:30px;
}
.flex-container hr {
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border-color: #FFF;
box-shadow: none;
border-width: 5px;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="flex-container">
<div class="intro"><hr></div>
<div class="edu"><hr></div>
<div class="Skills"><hr></div>
<div class="end"><hr></div>
</div>
Set margin: 0 for body, it has a defualt margin.
Set <hr>'s margin to 0.
Set height for each div to be 25vh (vertical height).
body {
background-color: red;
margin: 0;
}
.intro {
background-color: #674AB3;
height: 25vh;
}
.edu {
background-color: #A348A6;
height: 25vh;
}
.Skills {
background-color: #9F63C4;
height: 25vh;
}
.end {
background-color: #9075D8;
height: 25vh;
}
hr {
margin: 0;
}
<div class="intro">
<hr/>
</div>
<div class="edu">
<hr/>
</div>
<div class="Skills">
<hr/>
</div>
<div class="end">
<hr/>
</div>
You could try using grid! might as well make it responsive :D
This is to have 4 sections laying one next to another, to make them stack in the vertical direction, change:
grid-template-columns: repeat(4, 1fr);
to:
grid-template-rows: repeat(4, 1fr);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #00000000; /* transparent color */
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 vertical sections */
height: 100vh;
margin: auto;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="intro">
<p>intro</p>
</div>
<div class="edu">
<p>edu</p>
</div>
<div class="Skills">
<p>Skills</p>
</div>
<div class="end">
<p>end</p>
</div>
Something like this?
body {
background-color: red;
}
.intro {
height:200px;
background-color: #674AB3 !important;
}
.edu {
height:200px;
background-color: #A348A6 !important;;
}
.Skills {
height:200px;
background-color: #9F63C4 !important;;
}
.end {
height:200px;
background-color: #9075D8 !important;;
}
<div class="intro">
<hr>
</div>
<div class="edu">
<hr>
</div>
<div class="Skills">
<hr>
</div>
<div class="end">
<hr>
</div>
You can try this approach as well.
body {background-color:transparent;}
.intro {
background-color: #674AB3;
height:100vh;
width:100%;
}
.edu {
background-color: #A348A6;
height:100vh;
width:100%;
}
.Skills {
background-color: #9F63C4;
height:100vh;
width:100%;
}
.end {
background-color: #9075D8;
height:100vh;
width:100%;
}
.wrapper {
display:grid;
height:100vh;
width:100%;
}
<div class="wrapper">
<div class="intro">
Hello
</div>
<div class="edu">
Hello
</div>
<div class="Skills">
Hello
</div>
<div class="end">
Hello
</div>
</div>
You can simmply use display: flex to the parent container which is flex-container
like
<div style="display: flex;">
<div class="intro"><hr></div>
<div class="edu"><hr></div>
<div class="Skills"><hr></div>
<div class="end"><hr></div>
</div>
<div class="intro">
</div>
<div class="edu">
</div>
<div class="Skills">
</div>
<div class="end">
</div>
</div>
body {
background-color: red;
}
.main{
display: flex;
grid-template-columns: repeat(4,1fr);
width:100vw;
}
.intro {
background-color: #674AB3;
width: 25%;
height: 75vh;
}
.edu {
background-color: #A348A6;
width: 25%;
height: 75vh;
}
.Skills {
background-color: #9F63C4;
width: 25%;
height: 75vh;
}
.end {
background-color: #9075D8;
width: 25%;
height: vh;
}
grid
<div class="main">
<div class="intro">
</div>
<div class="edu">
</div>
<div class="Skills">
</div>
<div class="end">
</div>
.main{
display: flex;
grid-template-columns: repeat(4,1fr);
width:100vw;
}
.intro {
background-color: #674AB3;
width: 25%;
height: 75vh;
}
.edu {
background-color: #A348A6;
width: 25%;
height: 75vh;
}
.Skills {
background-color: #9F63C4;
width: 25%;
height: 75vh;
}
.end {
background-color: #9075D8;
width: 25%;
height:75vh;
}
I'm currently making a simple html page with two sections with content inside of each of them but the last content of the second div .right is going on the bottom of the page and make the page scrollable.
I tried making another div and put a flex-direction: column but it doesn't work:
body {
margin: 0;
}
.main-container {
display: flex;
flex-direction: column;
}
.left {
background: #ecece9;
width: 50%;
height: 100vh;
}
.right {
background: #ffffff;
width: 50%;
height: 100vh;
}
<div class="main-container">
<div class="left">
<h2>content</h2>
</div>
<div class="right">
<h2>content should be on top</h2>
</div>
</div>
How can I put two <div> that has the same width and height next to each other without having to scroll?
You need to use flex-direction: row and not flex-direction: column.
To avoid repeating width: 50%; height: 100vh; for both .left and .right, I would also create another class, such as .box, which is applied to both and contains these properties.
body {
margin: 0;
}
.main-container {
display: flex;
flex-direction: row;
}
.box {
width: 50%;
height: 100vh;
}
.left {
background: #ecece9;
}
.right {
background: #ffffff;
}
<div class="main-container">
<div class="left box">
<h2>content</h2>
</div>
<div class="right box">
<h2>content should be on top</h2>
</div>
</div>
Change the flex direction from column to row
body {
margin: 0;
}
.main-container {
display: flex;
flex-direction: row;
}
.left {
background: #ecece9;
width: 50%;
height: 100vh;
}
.right {
background: #ffffff;
width: 50%;
height: 100vh;
}
<div class="main-container">
<div class="left">
<h2>content</h2>
</div>
<div class="right">
<h2>content should be on top</h2>
</div>
</div>
Use CSS Grid to build Layouts it is very powerful. See I changed only two lines and the layout is ready.
.main-container {
display: grid;
grid-template-columns: 50% 50%
}
body {
margin: 0;
}
.main-container {
display: grid;
grid-template-columns: 50% 50%
}
.left {
background: #ecece9;
height: 100vh;
}
.right {
background: #ffffff;
height: 100vh;
}
<div class="main-container">
<div class="left">
<h2>content</h2>
</div>
<div class="right">
<h2>content should be on top</h2>
</div>
</div>
Try only display flex on large screen and and block on mobile
body {
margin: 0;
}
.main-container {
display: flex;
}
.left {
background: #ecece9;
width: 50%;
height: 100vh;
padding:20px;
}
.right {
background: #ddd;
width: 50%;
height: 100vh;
padding:20px;
}
/* For mobile screen
#media only screen and (max-width: 768px) {
.main-container{
display: block;
}
.left, .right{
width: 100%;
}
}
*/
<div class="main-container">
<div class="left">
<h2>content</h2>
</div>
<div class="right">
<h2>content should be on top</h2>
</div>
</div>
I have a layout like below -
.page-wrapper {
height: 100%;
min-height: 970px;
position: relative;
}
.pageheader {
min-height: 50px;
position: fixed;
min-width: 100%;
}
.navbar-fixed-top {
top: 0;
}
.page-sidebar {
float: left;
width: 180px;
top: 0;
overflow: auto;
}
.page-content {
min-height: 970px;
float: left;
}
footer {
width: 100%;
text-align: center;
position: relative;
}
<div class="page-wrapper">
<div>
<div id="header" class="pageheader navbar navbar-fixed-top">
Navbar Top
</div>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div>
<div class="clearfix"></div>
<div id=".navbar-collapse" class="page-sidebar">
Navbar Side
</div>
<div class="clearfix"></div>
</div>
<div>
<div id="content" class="page-content">
Content
</div>
</div>
<div>
<footer id="footer">
Foter
</footer>
</div>
</div>
My main content-wrapper is coming below the sidebar and footer somewhere in the middle. I have tried using
display:inline-flex
on content-wrapper which places page-content next to sidebar but footer still remains in middle of page. Please help me with this.
You can set page-content width using calc. check updated snippet below
body {
margin: 0px;
}
.page-wrapper {
height: 100%;
min-height: 970px;
position: relative;
width: 100%;
padding-top: 50px;
display: block;
}
.pageheader {
min-height: 50px;
position: fixed;
min-width: 100%;
background: red;
}
.navbar-fixed-top {
top: 0;
}
.content-wrapper {
background: grey;
float: left;
width: 100%;
}
.page-sidebar {
float: left;
width: 180px;
overflow: auto;
}
.page-content {
min-height: 970px;
float:left;
background: green;
width: calc(100% - 180px);
}
footer {
width: 100%;
text-align: center;
position:relative;
background: black;
clear: both;
}
<div class="page-wrapper">
<div>
<div id="header" class="pageheader navbar navbar-fixed-top"> header<br/>
</div>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div>
<div class="clearfix"></div>
<div id=".navbar-collapse" class="page-sidebar">sidebar</div>
<div class="clearfix"></div>
</div>
<div>
<div id="content" class="page-content"> content
</div>
</div>
<div class="clearfix"></div>
<div>
<footer id="footer">footer
</footer>
</div>
</div>
How i give 100% height to div when i give height 100% (It's not working) then i give height 100vh then min-height 100vh but it create extra space and div become more larger than required i also try max-height but not working. i want to give height 100% of element that any any small device it. In this example height is become greater than screen and make a scroll. how i get only 100% with out scroll with out missing any element.
<!doctype html>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
<style>
.header
{
width:100%;
height:60px;
background:#000;
}
.main
{ width:100%;
min-height:100vh;
background:#C00;
}
#footer
{width:100%;
height:100px;
background:#0C3;
}
</style>
You can use calc() to take off the values of header and footer:
body {margin:0}
.header {
height: 60px;
background: #000;
}
.main {
min-height: calc(100vh - 160px);
background: #C00;
}
#footer {
height: 100px;
background: #0C3;
}
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
you can try like this
you have to give the parent always a defined height if not it is not working if you work with %
body{
margin:0;
height:100vh;
}
.header {
width: 100%;
height: 60px;
background: #000;
}
.main {
width: 100%;
height: calc(100% - 160px); /* here you calculate the 100% minus the 60px of the header and 100px of the footer*/
background: #C00;
}
#footer {
width: 100%;
height: 100px;
background: #0C3;
}
<body>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
</body>
If you don't need Internet Explorer then you could use flexbox
body {
padding: 0;
margin: 0;
}
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
background-color: cyan
}
.header {
background-color: red;
padding: 10px;
text-align: center;
}
.footer {
background-color: green;
padding: 10px;
text-align: center;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="main">Content</div>
<div class="footer">Footer</div>
</div>
I want to get structure like this:
---------------------------------------------
| head |
---------------------------------------------
|left-menu||---content-div-------------------
| fixed || | |
| || content-left | con-right|
| ||--------------------------------|
css file:
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
}
.content-div {
position:absolute;
float:right;
left:150px;
}
.content-right {
width: 310px;
float: right;
}
.content-left {
float: left;
}
divs:
<div>
<div class="left-menu" > </div>
<div class="content-div">
<div class="content-left"> </div>
<div class="content-right"> </div>
</div>
</div>
I get content-right in the next line, not in the same line with content-left, like i have content-left width=105%, but i don't. I tried this and some other suggestion, but no luck. How can i fix this problem?
Flexbox can do that.
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100vh;
}
.left-menu {
position: fixed;
/* fix menu, no scroll */
left: 0;
width: 150px;
background: red;
height: 100%;
}
.content-div {
margin-left: 150px;
background: blue;
flex: 1;
display: flex;
}
.content-right {
flex: 0 0 310px;
}
.content-left {
flex: 1;
background: orange;
}
<div class="parent">
<div class="left-menu"></div>
<div class="content-div">
<div class="content-left"></div>
<div class="content-right"></div>
</div>
</div>
Check out the JsFiddle for the demo
HTML
<div>
<div class="header">HEADER</div>
<div class="left-menu" >LEFT MENU</div>
<div class="content-div">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
</div>
CSS
.header {
height: 70px;
background: blue;
}
.left-menu {
width: 120px;
background: red;
position: fixed;
left: 0px;
top: 70px;
bottom: 0px;
}
.content-div {background: yellow;margin-left: 120px}
.content-div div {
display: inline-block;
width: 49%;
}
.content-left {background: aqua;}
.content-right {background: green;}
Position anything is a pain, I suggest using bootstrap for something like this.
(I just saw the comment above me about suggesting the same thing but I'll give you the code so you can implement it just incase)
Bootstrap supplies a nice CDN that you can throw in your html and have bootstrap wherever you go!
So put all of this in your html...
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Header</h1>
</div> <!-- col-lg-12" -->
</div> <!-- row -->
<div class="row">
<div class="col-lg-3" style="position: fixed;">
<p>Left Menu Fixed</p>
</div> <!-- col-lg-3 -->
<div class="col-lg-6">
<p>Content Left</p>
</div> <!-- col-lg-6 -->
<div class="col-lg-3">
<p>Content Right</p>
</div> <!-- col-lg-3 -->
</div> <!-- row -->
</div> <!-- container -->
</body>
</html>
This will provide the layout you're suggesting.
Hope this helps!
This should work for what you want
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
width: 150px;
height: 100%;
}
.content-div {
position:fixed;
left:150px;
right: 0px;
height: 100%;
}
.content-right {
float: right;
}
.content-left {
float: left;
}
Set a height and background-color on .content-left and .content-right if you want to see how they position themselves.
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
background: black;
width:15%;
height: 100%;
}
.content-div {
position:absolute;
float:right;
left:16%;
background: red;
width:84%;
height: 100%;
}
.content-right {
width: 310px;
height: 100%;
float: right;
background: yellow;
}
.content-left {
float: left;
background: green;
height: 100%;
width: calc(100% - 310px);
}