can't get working layout as I want for the page I am creating for my portfolio website.
I have header with navigation(fixed size div).
then I have content div
and I have footer
<div>header</div>
<div>content</div>
<div>footer</div>
I want footer be fixed size, let say 200px, fixed always to the bottom of page. but content should fill all remaining space from header to footer. so that content div height would depend on windows height. By changing height only content div would change size.
flex makes it easy:
body {
margin:0;
height:100vh;
/* eventually : min-height: xx ; to avoid main to be squeezed down to zero in between header and footer */
display:flex;
flex-flow:column;
}
.main {
flex:1;/* fills remaining space */
overflow:auto;/* comes handy */
background:lightgray;/* see me */
}
div {
padding:1em;/* whatever */
}
<div>header of any height</div>
<div class="main">content</div>
<div>footer of any height</div>
header {
width: 100%;
position: fixed;
background-color: #9f0d0d;
color: #f5f5f5;
border-bottom: 1px solid #ddd;
min-height: 5%;
}
header :first-child {
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
article {
top: 55px;
width: 100%;
height: 90%;
position: fixed;
}
footer {
top: 95%;
min-height: 5%;
width: 100%;
position: fixed;
padding: 10px 15px;
background-color: #9f0d0d;
color: #f5f5f5;
border-top: 1px solid #ddd;
}
footer :first-child {
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
.centre {
text-align: center;
}
<div class="centre">
<header>Header</header>
<article>Remaining space</article>
<footer>Footer</footer>
</div>
Related
Question
I have an aside div and a main div which have some content.
Is it possible to specify that the orange box (aside content) + the blue box (the main content) are overall centered on the page and that the remaining space should be distributed equally to each side of the content?
Moreover while the aside content's width is fixed, the main content width should be responsive. Which means that while shrinking the width of the viewport:
fist the space on the sides of each content shrinks while the content divs remain the same
when there's no more space left on the sides, the main content shrinks
Limits
The answer should be limited to CSS features that have a global usage percentage of 98%+ on caniuse.com (for example flexbox). This mainly excludes CSS grids.
Playground
Here you can find the above playground.
What I tried
I'm not sure where to start. I tried:
margin: auto; on the aside content and main content
padding: auto; on the content parents
display: inline + text-align:right/left
but they all have the same problem that you either have to specify the width of the parents and you don't really have them centered.
A Stack Snippet for those who wish to be able to easily adapt their answer to existing code:
aside,
main {
min-height: 200px;
text-align: center;
color: white;
font-family: Verdana;
}
body {
display: flex;
margin: 0;
padding: 0;
}
aside {
background-color: red;
flex: 1 1 300px;
}
aside .content {
width: 200px;
background-color: orange;
max-height: 100px;
line-height: 100px;
margin-left: auto;
}
main {
background-color: green;
flex: 1 1 800px;
}
main .content {
background-color: blue;
line-height: 100px;
max-height: 100px;
max-width: 800px;
}
<body>
<aside>
<div class="content">
Aside content
</div>
</aside>
<main>
<div class="content">
Main content
</div>
</main>
</body>
This seems to do the trick. I drew inspiration from #Aivaras' answer for sizing down below main's target width, but also the realization that flexbox does a lot of heavy lifting for us. I've specified the width of aside and main, but since they are flex-basis: auto, the width is only used as the basis of the actual width. Or so I think.
aside,
main {
min-height: 200px;
text-align: center;
color: white;
font-family: Verdana;
flex: 1 1 auto;
}
* {
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
display: flex;
}
aside {
background-color: red;
width: 200px;
min-width: 200px;
}
aside .content {
width: 200px;
background-color: orange;
max-height: 100px;
line-height: 100px;
margin-left: auto;
}
main {
background-color: green;
width: 800px;
}
main .content {
background-color: blue;
line-height: 100px;
max-height: 100px;
}
#media (min-width: 1000px) {
main .content {
width: 800px;
}
}
#media (max-width: 999px) {
main .content {
width: 100%;
}
}
<body>
<aside>
<div class="content">
Aside content
</div>
</aside>
<main>
<div class="content">
Main content
</div>
</main>
</body>
I added margin: auto to both the orange and blue boxes.
Moreover, I gave the blue box a percentage width
main .content {
background-color: blue;
line-height: 100px;
max-height: 100px;
max-width: 800px;
margin: auto;
width: 80%
}
This makes the blue box responsive. Not sure if this is what you wanted.
Add margin: auto to both content divs and media query for viewport width less than 1200px to set main content width to 100% then.
#media only screen and (max-width:1000px){
.main-content{width:100%}
}
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
After searching for this topic for a while in internet, i came here with no clue. I am writing html pages where i am in a need of sticky footer, that should not change it's position even on browser resize.
What i am suffering now is, when i am changing my browser size, i am getting a horizontal and vertical scroll bar. But my footer is displaying above all the div elements. Here is my code.
HTML,
<!-- Main Content -->
<div class="wrapper">
<div id="welcomeDiv">
<label>Welcome Message</label>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div id="footerDiv">
<h5 class="copyright">© 2013 </h5>
<h5 class="footer_info">Career | Help</h5>
</div>
</div>
CSS:
/* Footer */
div#footer {
position: absolute;
bottom: 0;
height: 4em;
clear: both;
width: 1580px;
padding: 0;
border: 1px solid #000;
}
div#footerDiv {
font-size: 10px;
color: grey;
text-align: center;
margin: 0 auto;
width: 100%;
}
div#footerDiv h5 {
font-size: 9pt;
font-weight: 300;
}
div#footerDiv h5.copyright {
margin-left: 10px;
float: left;
}
div#footerDiv h5.footer_info {
margin-right: 10px;
float: right;
}
/* Body Content styles */
.wrapper {
min-height: 100%;
height: auto !important;
}
Can some one please help me what's wrong in my code. I dont want to see cssstickyfooter.com anymore.
Thank you,
Add width and height to body and make footer width as 100%
body{
width: 100%;
height:100%;
margin : 0;
}
div#footer {
position: absolute;
bottom: 0;
height: 4em;
clear: both;
width: 100%;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
Fiddle: http://jsfiddle.net/sK9Wu/2/
I'm trying to create an effect where the blue section extends past the gray section.
The blue section is currently contained within the gray section, which may be the problem.
http://nufios.com/node
I've got this as the HTML:
<div id="header-wrapper">
<div id="header">
...
</div></div>
And this as the CSS:
#header-wrapper {
width: 100%;
background-color: #686868;
}
#header {
width: 60%;
background-color: #45719E;
margin: 0 auto;
padding: 0 2em 2em 2em;
position: relative;
}
How do I get it so that the blue section is centered within the gray section, and can still go down below the gray section (i.e., the height is greater on the blue section).
Try using z-index and fixed heights:
CSS:
#header-wrapper {
width: 100%;
background-color: #686868;
height:30px;
}
#header {
width: 60%;
background-color: #45719E;
margin: 0 auto;
padding: 0 2em 2em 2em;
position: relative;
z-index:10;
height:50px;
}
jFiddle demo here: http://jsfiddle.net/LynchJustRules/RQV4h/
Just give your #header-wrapper height. If you want to always fit the blue box's height when its height is less than the gray box's, set the max-height
#header-wrapper {
width: 100%;
background-color: #686868;
max-height: 92px;
}
Soooooo I'm making a sticky footer in Css. It doesn't work the way I want it to. The footer sticks to the bottom, but I also want 100% height for the page. This doesn't work, and I've tried a lot. Currently, the footer gets in the way of the container, and they overlap. If i give the container margin-bottom: 70px;, it creates extra unwanted space when the content is very small, making an unnecessary scrollbar.
Here's my code:
<html><head>
<style type='text/css'>
body {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 800px;
height: auto !important;
min-height: 100%;
}
.bold-show {
font-family: Helvectica, sans-serif;
font-size: 96px;
background-color: rgba(0, 0, 0, 0.95);
color: #eeeeee;
padding: 50px;
}
#footer {
position: relative;
height: 70px;
width: 100%;
text-align: center;
display: table;
margin-top: -70px;
background-color: rgba(0, 0, 0, 0.9);
color: #eeeeee;
}
#footer div {
display: table-cell;
vertical-align: middle;
}
</style>
</head><body>
<div class='container'>
<div class='bold-show'>
Donuts. Food for thought. This is my place, this fox will guide you. Random filler text for the win.
</div>
</div>
<div id='footer'>
<div>
We support a free and open internet.
</div>
</div>
</body></html>
Also, this is not the actual site. Just testing to implement on real site.
I think that this is what you are looking for:
<div id="wrapper">
<header></header>
<div id="main"></div>
<footer></footer>
</div>
body, html, #wrapper { height: 100%; } /* Create space for elements to be 100% */
#wrapper { display: table; } /* Create a table-structure */
#wrapper > * { display: table-row; } /* All direct children behave as rows */
#wrapper > header,
#wrapper > footer { min-height: 100px; } /* These must be at least 100px */
#main { height: 100%; } /* Let the mid section fill up the remaining space */