I'm having a small issue with my code . I'm trying to code after a long time and forgot a few basics. I'm trying to create a simple html layout .
As you will also see in the pictures , i'm getting another issue where the page is slightly longer than i expected and its showing the slider to move up and down . I didn't want this unless the page content is longer than expected (wrap) .
The top will remain fixed all the time . the footer will move based on the length of the content or stay fixed at the bottom if the content(wrap) is small.
What i'm expecting:
What i'm getting (without top):
with top :
HTML layout :
<!DOCTYPE html>
<html lang="en">
<head>
#include('layouts.includes.head')
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id ="top">
<div>
<div id = "wrap">
</div>
<footer>
</footer>
</body>
</html>
CSS :
html,body
{
height: 100%;
background-color:red;
}
#top {
height: 50px;
height: auto;
margin: 0 auto -50px;
background-color: yellow;
width:auto;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -50px;
background-color: blue;
width:auto;
}
footer {
height: 50px;
background-color: black;
}
Fix the footer to the bottom of the page and give the wrap element a bottom margin of the height of the footer so the footer will never overlap the wrap div.
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto 50px auto;
background-color: blue;
width:auto;
}
footer {
height: 50px;
background-color: black;
position:absolute;
bottom:0;
left:0;
}
Try like this: Demo
html, body {
height: 100%;
background-color:grey;
position:relative;
}
#top {
height: 50px;
height: auto;
margin: 0 auto;
background-color: yellow;
width:auto;
position:fixed;
display:block;
top:0;
left:0;
right:0;
}
#wrap {
min-height: 100%;
height: auto;
margin: 50px auto 0 auto;
background-color: blue;
width:auto;
}
footer {
height: 50px;
background-color: black;
position:fixed;
bottom:0;
left:0;
right:0;
}
Try this code here
Header and footer would be fixed only the content would be scroll.
If there is no content the layout will be fitted as per the window resolution. the scroller would be disable till then.
Related
So I can successfully center a div using the following CSS:
.container {
width: 1024px;
margin: 0 auto;
}
I then have the container inside the body tags, covering all the displayed page content. This works just fine.
The issue is that when I do the same thing but set the width to 100%, the page is no longer centered. This restricts how dynamic I can make my page, as I have to then create a container for each screen width (in px).
How can I create a container that will center my page with a width of 100%?
Many thanks.
if you want to just center a div within a container.Then you have style div within container as margin:0 auto; . Below is simple demonstration:
.container_
{
width:100%;
height:700px;
background:green;
}
.centreBox
{
width:50%;
height:50%;
margin:0 auto;
background:red;
}
<div class="container_">
<div class="centreBox">
</div>
</div>
And if you want div to place it horizontally as well as vertically in center
.container_
{
width:100%;
height:700px;
position:relative;
background:green;
}
.centreBox
{
width:50%;
height:50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:red;
}
<div class="container_">
<div class="centreBox">
</div>
</div>
And you want to place div with width 100% ,then it will occupy whole horizontal space available.There you can only apply vertical centering:
.container_
{
width:100%;
height:700px;
position:relative;
background:green;
}
.centreBox
{
width:100%;
height:50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:red;
}
<div class="container_">
<div class="centreBox">
</div>
</div>
Hope this helps :)
If you have text inside that container which you want to center, add text-align: center; to the CSS rule you posted.
If you have other elements inside the container which you want to center, apply margin: 0 auto to them, as you did to the container itself (they need a width less than 100% for that to have any effect...)
I tried to create a minimal working example:
<!DOCTYPE html>
<html>
<head>
<title>CSS center</title>
<style type="text/css">
.container {
height: 100px;
width: 100%;
background-color: red;
}
.content {
margin: 0 auto;
height: 100px;
width: 80%;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
</div>
</body>
</html>
The blue content is 80% of the red container width and is centered in the parent.
If you want to center content you should add margin: 0 auto; to content.Not to container.
.container {
width: 100%;
}
.content {
margin: 0 auto;
height: 100px;
width: 50%;
background-color: black;
}
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'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/
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;
}
am making a website, and have a wrapper on the footer, i want the footer as sticky footer, but when i minimise the screen and make it smaller the footer overtakes the content and header.
#footerWrapper {
height: 177px;
bottom: 0;
position: absolute;
width: 100%;
}
This does what i want as it makes the footer go to the bottom of the page regardless of what size the screen is. however when i minimise the screen and move it up it stays absolute hence staying in that 1 page.
as i would want it to stay on the page rather than the footer being absolute.
any ideas.
I'm using this, and it works fine, on mobiles too ...
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
source:
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
demo:
http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/
I was able to keep the footer sticky and not overtake the header by using z-index. Just give the higher DIVs higher z-indexes.
#headWrapper {
padding-bottom: 0px;
position: relative;
}
#headWrapper {
z-index: 2;
height: 160px;
/* width: 960px; */
margin: 0 auto;
background: url(/images/PageImages/homeHeadBack.png) repeat-x;
}
#footerWrapper {
background: url(/images/PageImages/footerBack.png) repeat-x;
height: 177px;
position: absolute;
width: 100%;
bottom: 0;
z-index: 1;
}
Please note that #headWrapper needs to specify position:relative.
I think you may start from this. Worked on Chrome.
Try this
#footerWrapper{
position: fixed;
}
#contentWrapper{
margin-bottom: 177px; // height of the footer
}
Alright, I'm not positive but I think I understand what you're trying to accomplish
#footerWrapper {
background: url(/images/PageImages/footerBack.png) repeat-x;
height: 177px;
position: fixed;
width: 100%;
bottom: 0px;
}
#contentWrapper {
background: url(/images/PageImages/contentTopBack.png) no-repeat center top;
min-height: 208px;
margin-bottom: 177px;
}
If that doesn't fix it than I don't understand what you're aiming for.
try this one.
HTML:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2014</p>
</div>
</body>
</html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
for more information.