I have a strange behavior when I'm using a CSS table and a black layer that is with position absolute on top of the table in HTML.
When the layer is enabled, (display: block), then it's destroying the layout. But when I disable is (display: none), everything is fine.
Here is a small example (you have to change the css through the developer tools). Is there something that I forgot to set, etc?
It's not possible to use flexbox instead of the table!
html,
body {
width: 100%;
height: 100%;
}
body {
display: table;
table-layout: fixed;
}
#menu {
display: none;
background: #28292D;
width: 200px;
position: fixed;
left: -300px;
top: 0;
height: 100%;
text-align: center;
padding-left: 15px;
padding-right: 15px;
z-index: 3;
}
#blackLayer {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
height: 1265px;
display: block;
}
#sidebar {
display: table-cell;
vertical-align: top;
width: 223px;
background: #3d464d none repeat scroll 0 0;
}
#content {
display: table-cell;
vertical-align: top;
background: #f0f0f0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="menu"></div>
<div id="blackLayer"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
</html>
Updated:
I think your markup is wrong. Wrap the #sidebar and #content in another #container and give it a display:flex; and position:absolute; and a min-height:100%;. Flex's align-items:stretch; will make your sidebar and content stretch their height to the parent height.
Try like this:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#container {
display: flex;
width: 100%;
min-height: 100%;
position: absolute;
flex-direction: row; /* children will fall side by side like columns */
align-items: stretch; /* children will stretch to my height */
}
#menu {
display: none;
background: #28292D;
width: 200px;
position: fixed;
left: -300px;
top: 0;
height: 100%;
text-align: center;
padding-left: 15px;
padding-right: 15px;
z-index: 3;
}
#blackLayer {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
height: 100%;
display: block;
}
#sidebar {
width: 223px;
background: #3d464d none repeat scroll 0 0;
}
#content {
flex: 1 0; /* Now I will take remaining space left by my sister Ms. #sidebar */
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="menu"></div>
<div id="blackLayer"></div>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
</body>
</html>
Related
I want to center an element within a parent. That's easy enough with transform, flexbox, grid and so on...
The problem is the overflow-behavior. When the parent shrinks below the dimensions of the child, scrollbars appear. But they do not allow me to scroll to the top-left of the child. Here's what I mean:
gif animation showing window-resizing and the css behavior
This example uses flexbox for it's centering, html below:
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
div.content {
flex-shrink: 0;
width: 600px;
height: 600px;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</main>
<footer>
</footer>
</body>
</html>
What I want to achieve looks more like this:
gif animation showing window-resizing and the css behavior
In this example I didn't use flexbox-centering. I wrapped the content within a container that has it's margin set to: 0 auto. This will achieve the wanted behavior on the x-axis, but not the y-axis. How can I achieve this on both axes?
Below the html and css of the second example using a container and auto-margin for centering:
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
/* display: flex;
justify-content: center;
align-items: center; */
overflow: auto;
}
div.container {
margin: 0 auto;
width: 600px;
height: 100%;
background-color: #333333;
}
div.content {
/* flex-shrink: 0; */
width: 600px;
height: 600px;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="container">
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
Ah... I hope to find a solution that doesn't use javascript for this behavior. In case I find the solution, I'll post it with a corresponding gif.
Use display: flex on the .container and margin: auto on the .content .
This is a method to solve the centering problems of flex and by this way it will center .content
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
/*display: flex;
justify-content: center;
align-items: center; */
overflow: auto;
}
div.container {
display: flex;
margin: 0 auto;
width: 600px;
height: 100%;
background-color: #333333;
}
div.content {
/* flex-shrink: 0; */
margin: auto;
width: 600px;
height: 600px;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="container">
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
when I scroll down on my page, my container overlap the header, but I want my header to overlap the container, so I made my header on a fixed position, but it does not work
here is my html code:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="page">
<header class="leheader">
<div id="bloc1"></div>
<img src="https://i.imgur.com/dm6H7GV.png">
<div id="bloc2"></div>
</header>
<main class="container"></main>
</div>
</body>
</html>
and here is my css code:
body,
html,
.page {
background: #666666;
width: 99%;
height: 100%;
}
.leheader {
display: flex;
width: 99%;
position: fixed;
flex: 1 100%;
height: calc(100%-50px);
}
#bloc1 {
margin-left: 1px;
margin-top: 0.5px;
height: 50px;
width: 90px;
background: #cccccc;
border-radius: 10px 0 0 0;
}
#bloc2 {
background: #467491;
margin-top: 4px;
width: 93%;
height: 37px;
}
.container {
position: absolute;
top: 57px;
left: 9px;
background: #cccccc;
width: 99%;
height: calc(100% - 33px);
}
where is the problem ?
Try adding the z-index property to the header.
like this....
z-index: 2
In CSS to make something Fixed position you also need to give it a z-index (which is its position on z-axis). Read more about Z-Index here. Apart from it you also have to give it a position in terms of top, left, bottom and left to tell it where it has to fixed.
.leheader {
display: flex;
width: 99%;
position: fixed;
top:0;
left:0;
z-index:2;
flex: 1 100%;
height: calc(100%-50px);
}
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 2 years ago.
I am working on my first ever website and it seems that I've run into a problem. I've created a footer, however it does not stay at the bottom.The footer messes up everything else in the page and distorts my items. What should I add in order make my footer stick to the bottom with causing any trouble to the rest of my page?. Here is my code.
* {
margin: auto;
padding: auto;
box-sizing: border-box;
font-family: Century Gothic;
}
header {
height: 15%;
background-size: cover;
background-position: center;
background-color: #ebebeb;
border-bottom: 5px solid #A9A9A9;
position: relative;
}
html,
body {
font-size: .80em;
margin: 0%;
padding: 0%;
color: #696969;
height: 100%;
width: 100%;
}
.footer {
background: #bfbfbf;
color: #d3d3d3;
height: 300px;
position: relative;
}
s .footer .footer-content {
border: 1px solid red;
height: 400px;
}
.footer .footer-bottom {
background: #343a40;
color: #686868;
height: 50px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
.footer-section-socials h1 {
margin-left: 6%;
margin-top: -1%;
font-weight: 50;
font-size: 150%;
color: black;
}
.logo-footer h1 {
padding: 1.5%;
margin-left: 3%;
font-family: Leckerli One;
color: black;
font-size: 3.1875rem;
}
.footer-about {
margin-left: 2%;
margin-right: 0%;
}
<footer class="footer">
<div class="footer-content">
<div class="footer-section-socials">
</div>
<div class="footer-section links">
</div>
<div class="footer-bottom">
© #.com | Designed by #
</div>
</div>
</footer>
Help in advance!
Your footer is not sticking to the bottom of the page, because the height of the gray div doesn't span the entire height of the webpage. What you can do to fix this problem is :
<div class='container'>
<div class='footer'>
</div>
.container{
height:100vh;
border:3px solid red;
position:relative;
}
.footer{
position:absolute;
bottom:0%;
width:100%;
height:30px;
background:gainsboro;
}
You have to use fixed position to make it stick to the bottom
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
There are several ways to do this, I added a default html structure to the snippet:
Position absolute footer and relative, 100vh min-height body:
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
position: relative;
min-height: 100vh;
padding-bottom: 50px;
}
body .footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
Using flex, min height 100vh body and a section above the footer with flex 2:
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
}
body .main {
flex: 2 0 auto;
}
body .footer {
flex: 0 0 50px;
display: block;
width: 100%;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
Using a 100vh min-height body, a section with calc height and a fixed height footer:
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: block;
}
body .main {
min-height: calc(100vh - 50px);
}
body .footer {
height: 50px;
display: block;
width: 100%;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
Fixed position footer (always visible in viewport):
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body .footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<section class="main"></section>
<footer class="footer"></footer>
</body>
</html>
You should normally have a navigation bar, a page body and a footer.
The page body should take up all the space between the navigation and the footer.
Least hackish way is using Flex. Try the following:
body {
min-height: 100vh;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.navigation {
height: 60px;
width: 100%;
background: blue;
}
.content {
height: 100%;
width: 100%;
display: flex;
flex-grow: 1;
}
.footer {
height: 100px;
width: 100%;
background: red;
}
<body>
<div class="navigation"></div>
<div class="content">Test content</div>
<div class="footer"></div>
</body>
I have added a texture background image in html body part and it is repeating the whole body section, but I want this texture will be repeat half of the browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
<style>
body{
background:url('bg.png');
}
</style>
</head>
<body>
</body>
</html>
reference image - what I want
Just use a pseudo-element on the body that is absolutely positioned.
It's 50% wide, 100% high and over 50%.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
position: relative;
}
body:before {
content: '';
position: absolute;
left: 50%;
height: 100%;
width: 50%;
background-image: url(http://lorempixel.com/image_output/abstract-q-c-25-25-1.jpg);
z-index: -1;
}
h1 {
text-align: center;
color: red;
margin: 0;
}
<h1>My Heading</h1>
Below is the solution
Demo
HTML:
<div id="background"></div>
<div id="wrap">content area</div>
CSS:
body {
background: url('bg.png');
}
#background {
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color:#fff;
z-index: 1;
}
#wrap {
position: relative;
z-index: 2;
padding: 30px;
text-align: center;
font-weight: bold;
}
I want to divide my page into four equal parts, each of same height and width (50-50%).
I don't want to use JavaScript. I want blocks (<div>s) to be resized automatically (and relatively) if the browser window is resized.
I have not worked with CSS for a long time. I've no idea how to handle this.
Demo at http://jsfiddle.net/CRSVU/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 50%;
float: left;
}
#div1 {
background: #DDD;
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
If you want to have control over where they are placed separate from source code order:
html, body { height: 100%; margin: 0; padding: 0 }
div { position: fixed; width: 50%; height: 50% }
#NW { top: 0; left: 0; background: orange }
#NE { top: 0; left: 50%; background: blue }
#SW { top: 50%; left: 0; background: green }
#SE { top: 50%; left: 50%; background: red }
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>
JSFiddle demo
Note: if you want padding on your regions, you'll need to set the box-sizing to border-box:
div {
/* ... */
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
…otherwise your "50%" width and height become "50% + 2em", which will lead to visual overlaps.
Some good answers here but just adding an approach that won't be affected by borders and padding:
html, body { width: 100%; height: 100%; padding: 0; margin: 0 }
div { position: absolute; padding: 1em; border: 1px solid #000 }
#nw { background: #f09; top: 0; left: 0; right: 50%; bottom: 50% }
#ne { background: #f90; top: 0; left: 50%; right: 0; bottom: 50% }
#sw { background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se { background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>
I did not want to add style to <body> tag and <html> tag.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 100%;
height: 50vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 50%;
height: 100%;
}
.quodrant1{
top: 0;
left: 50vh;
background-color: red;
}
.quodrant2{
top: 0;
left: 0;
background-color: yellow;
}
.quodrant3{
top: 50vw;
left: 0;
background-color: blue;
}
.quodrant4{
top: 50vw;
left: 50vh;
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Or making it looks nicer.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 96%;
height: 46vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 46%;
height: 96%;
border-radius: 30px;
margin: 2%;
}
.quodrant1{
background-color: #948be5;
}
.quodrant2{
background-color: #22e235;
}
.quodrant3{
background-color: #086e75;
}
.quodrant4{
background-color: #7cf5f9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren't very copy-paste-able because they directly modify div or draw over the entire page.
The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.
As a bonus, text is responsively centered in the quarters.
HTML:
<head>
<meta charset="utf-8">
<title>Box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Title Bar</h1>
<div id="dividedbox">
<div class="quarter" id="NW">
<p>NW</p>
</div>
<div class="quarter" id="NE">
<p>NE</p>
</div>
<div class="quarter" id="SE">
<p>SE</p>
</div>
<div class="quarter" id="SW">
<p>SW</p>
</div>
</div>
</body>
</html>
CSS:
html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%} /* for div growth */
.quarter {position: absolute; width:50%; height:50%; /* gives quarters their size */
display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0; left:0; background:orange; }
#NE { top:0; left:50%; background:lightblue; }
#SW { top:50%; left:0; background:green; }
#SE { top:50%; left:50%; background:red; }
http://jsfiddle.net/og0j2d3v/
try this... obviously you need to set each div to 25%. You then will need to add your content as needed :) Hope that helps.
body {
margin: 0;
padding: 0;
height: 100%;
}
#top_div {
height: 25%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
#mid1_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#mid2_div {
height: 25%;
width: 100%;
background-color: #000000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#bottom_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>