Below is my CSS and HTML code. As you can see the margin on right is not coming.
Can anybody tell me the reason for this?
Is the structure of HTML, CSS right? I have to show two windows in the middle of the page and a footer and a header. So, I have positioned everything absolute.
Is that correct practice?
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
min-width: 100vh;
}
.wrapper{
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
background-color: #666;
overflow-x: hidden;
}
.header{
position: absolute;
margin: 0;
top: 0%;
height: 10%;
width: 100%;
background-color: #fff;
}
.footer{
position: absolute;
bottom: 0%;
height: 10%;
width: 100%;
background-color: #f7f7f7;
}
.header .brand-header{
}
.window{
position: absolute;
width: 100%;
top: 10%;
bottom: 10%;
background-color: #eee;
margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
</head>
<body>
<div class="wrapper">
<div class="header"> </div>
<div class="window">
<div class="sub-window left-window"> </div>
<div class="sub-window right-window"> </div>
</div>
<div class="footer"> </div>
</div>
</body>
</html>
Apply width calc like
.window {
background-color: #eee;
bottom: 10%;
margin: 10px;
position: absolute;
top: 10%;
width: calc(100% - 20px); /*You apply margin:10px;*/
}
that is just because your width is 100% and you applied an margin of 20 px(margin-left:10,margin-right:10) => in effect it requires space of 100% + 20px. that is the reason for you can trace out margin on your right side.
use width: calc(100% - 20px); on your .window ,it will works fine.
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
min-width: 100vh;
}
.wrapper{
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
background-color: #666;
overflow-x: hidden;
}
.header{
position: absolute;
margin: 0;
top: 0%;
height: 10%;
width: 100%;
background-color: #fff;
}
.footer{
position: absolute;
bottom: 0%;
height: 10%;
width: 100%;
background-color: #f7f7f7;
}
.header .brand-header{
}
.window{
position: absolute;
width: calc(100% - 20px);
top: 10%;
bottom: 10%;
background-color: #eee;
margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="window">
<div class="sub-window left-window">
</div>
<div class="sub-window right-window">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Related
i'm trying to split the page in 4 parts, but with different sizes. With the following code, i get 2 parts horizontally.
But when i want to insert the first vertical in the green area, only a part is displayed...
I need look like this: http://prntscr.com/mp1sxi
This is my code:
#top,
#bottom,
#right,
#left.
{
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: blue;
height: 20%;
}
#bottom {
bottom: 0;
background-color: green;
height: 80%
}
#right {
right: 0;
background-color: orange;
width: 20%;
}
#left {
left: 0;
background-color: red;
width: 80%;
}
<div id="top">top
</div>
<div id="bottom">bottom
<div id="left">top</div>
</div>
Someone can help me?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
#top,
#bottom,
#right,
#left {
position: fixed;
overflow: auto;
}
#top {
top: 0;
left: 0;
background-color: palevioletred;
height: 20%;
width: 100%;
}
#bottom {
left: 0;
bottom: 0;
background-color: green;
height: 20%;
width: 80%;
}
#right {
right: 0;
background-color: blue;
width: 20%;
top: 20%;
height: 80%;
}
#left {
left: 0;
width: 80%;
top: 20%;
height: 60%;
background: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="top">top</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="bottom">bottom</div>
</body>
</html>
I have tried everything but footer is not at the bottom of page.
I tried position: fixed; but always when I scroll down it stays on the same position.
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push {
height: 142px;
background: black;
}
Use following CSS:
.footer {
position:fixed;
left:0px;
bottom:0px;
height:142px;
width:100%;
background:black;
}
here is test fiddle: https://jsfiddle.net/85nyb2mv/
If to use position: fixed, the element will always be at the same position of the screen. If you want footer to be at the bottom of wrapper element, try to give position: relative to .wrapper and position: absolute to .footer, it will place your footer at the bottom of wrapper. Here is an example:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
background-color: gray;
position: relative;
}
.footer, .push {
height: 142px;
width: 100%;
background: black;
position: absolute;
bottom: 0;
left: 0;
}
<div class="wrapper">
<div class="footer"></footer>
</div>
Use this CSS styles:
.wrapper {
height: calc(100% - 142px);
margin: 0 auto;
}
.footer {
height: 142px;
background: black;
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
}
CASE 1
When body' height is bigger than 100vh
body{
margin: 0;
padding: 0;
min-height: 100vh;
height: 2000px;
position: relative;
background: pink;
}
header{
width: 100vw;
height: 100px;
background: gold;
}
footer{
position: absolute;
bottom: 0px;
left: 0px;
width: 100vw;
height: 100px;
background:darkgray;
}
<body>
<header>
</header>
<footer>
</footer>
</body>
CASE 2
When body' height is smaller than 100vh
body{
margin: 0;
padding: 0;
min-height: 100vh;
height: 200px;
position: relative;
background: pink;
}
header{
width: 100vw;
height: 100px;
background: gold;
}
footer{
position: absolute;
bottom: 0px;
left: 0px;
width: 100vw;
height: 100px;
background:darkgray;
}
<body>
<header>
</header>
<footer>
</footer>
</body>
**html**
<body>
<header>
</header>
<section>
</section>
<footer>
</footer>
</body>
**CSS**
<style type="text/css">
footer {
position:fixed;
left:0px;
bottom:0px;
width:100%;
background:black;
color:#fff;
z-index:99;
}
</style>
The problem was <div class="fade">, so I removed it and added
.page-content:after {
content: "";
display: block;
}
<div class="page-content"> ----> between header and footer
*{
margin: 0;
padding: 0;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
}
.container #short-des{
background: rgba(0,0,0,.5);
height: 400px;
width: 500px;
position: relative;
}
<div class="container">
<img src="cover.jpg">
<div id="short-des">
</div>
</div>
i want short-des div to visible over image at the center i tried z-index but it not working. please help me out to fix this with reason so i will take these things in future
Put your div positioned absolute to overlap your image. Use left/top/right/bottom properties to set it's position.
It's position will be relative to closest non-static (absolute/relative/fixed) positioned element or <body>
#short-des,
#short-des2 {
position: absolute;
left: 90px;
top: 50px;
width: 50px;
height: 50px;
background-color: rgba(100, 250, 100, .6);
z-index: 7;
}
#short-des2 {
z-index: 8;
left: 100px;
top: 55px;
background-color: rgba(250, 100, 100, .7);
}
.wrapper {
margin: 50px;
position: relative;
}
<div class="wrapper">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<div id="short-des"></div>
<div id="short-des2"></div>
</div>
You can add image as background of container div [.container] as
.container{
background: url('path/to/image'); // eg. 'cover.jpg'
background-repeat: no-repeat;
background-size: 100% 100%;
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
and remove the <img> from html
<div class="container">
<div id="short-des"></div>
</div>
Try this...
Just set position : absolute then set the location using top and left CSSproperties.
* {
margin: 0;
padding: 0;
}
.container {
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img {
width: 100%;
height: 638px;
}
.container div#short-des {
background: rgba(0, 0, 0, .5);
height: 40px;
width: 50px;
top:40%;
left:50%;
position: absolute;
z-index:999;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<div id="short-des">
</div>
</div>
</body>
</html>
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.box {
position: relative;
width: 638px;
height: 300px;
}
.box img{
width: 100%;
height: 500px;
}
.box #short-des{
background: rgba(0,0,0,.5);
height: 400px;
width: 500px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -250px;
}
<div class="container">
<div class="box">
<div id="short-des">
</div>
<img src="http://www.slowtrav.com/blog/girasoli/IMG_6820.JPG">
<div id="short-des">
</div>
</div>
</div>
http://codepen.io/rizwanmughal/pen/KgZQRx
How do I split my HTML page into two rows using divs, where the bottom div has a height of 100px and the top div takes up the remaining space.
Currently I have the following, however here the top div overlaps the bottom div:
html,
body,
object {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
#mainContainer {
position: relative;
height: 100%;
width: 100%;
}
#topContainer {
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
#bottomContainer {
border: 1px solid blue;
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
width: 100%;
}
<body>
<div id="mainContainer">
<div id="topContainer">
This is the top div
</div>
<div id="bottomContainer">
This is the bottom div
</div>
</div>
</body>
I have tried using display: table; which works fine in Chrome and Firefox but unfortunately not in IE9 (which is a requirement). Any help would be greatly appreciated.
Just change #topContainer to
#topContainer {
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
bottom: 100px; //set bottom
height: calc(100% - 100); //calculate height
width: 100%;
}
Rest of your code works well.
Here is updated snippet.
html,
body,
object {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
#mainContainer {
position: relative;
height: 100%;
width: 100%;
}
#topContainer {
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
bottom: 100px;
height: calc(100% - 100);
width: 100%;
}
#bottomContainer {
border: 1px solid blue;
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
width: 100%;
}
<body>
<div id="mainContainer">
<div id="topContainer">
This is the top div
</div>
<div id="bottomContainer">
This is the bottom div
</div>
</div>
</body>
Apart from the above method that friends say
you can use display: table; it's never top div overlap the bottom div
for show display: table; in IE9 you can use
<meta http-equiv="X-UA-Compatible" content="IE=edge">
html & css:
html,
body,
object {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
#mainContainer {
display: table;
height: 100%;
width: 100%;
}
#top{
display: table-row;
}
#topContainer {
display: table-cell;
border: 1px solid red;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
#bottom{
display: table-row;
}
#bottomContainer {
display: table-cell;
border: 1px solid blue;
bottom: 100px;
left: 0px;
height: 100px;
width: 100%;
}
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="mainContainer">
<div id="top">
<div id="topContainer">
This is the top div
</div>
</div>
<div id="bottom">
<div id="bottomContainer">
This is the bottom div
</div>
</div>
</div>
</body>
</html>
Try this html markup:
<div class="top">
This is your top div
</div>
<div class="bottom">
This is your bottom div
</div>
And the matching styles:
.bottom {
position: fixed;
bottom: 0px;
width: 100%;
height: 100px;
/* Added styles for demo */
background-color: black;
color: white;
}
Here it is injsfiddle: https://jsfiddle.net/b59y4f1s/1/
html,
body,
object {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
#mainContainer {
position: relative;
height: 100%;
width: 100%;
}
#topContainer {
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
height: 86.1%; // exact percentage
width: 100%;
}
#bottomContainer {
border: 1px solid blue;
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
width: 100%;
}
<body>
<div id="mainContainer">
<div id="topContainer">
This is the top div
</div>
<div id="bottomContainer">
This is the bottom div
</div>
</div>
</body>
I want to achieve same thing horizontally as you can see here vertically and IE9+ compatible
[Edit]: I would like to have middle content on overflow have scroll bar, in this case tabling won't help.
jsFiddle
Css:
.container{
width: 100%;
height: 100%;
position: relative;
background-color: silver;
}
.top{
width: 50px;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.bottom{
width: 50px;
height: 100%;
position: relative;
float: right;
background-color: green;
}
.middle{
background-color: blue;
overflow: hidden;
height: 100%;
}
HTML:
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="middle"></div>
</div>
Question: Is it possible without javascript and any fixed values?
I don't want to do something like this:
.top-div {
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.middle-div{
top: 50px;
bottom: 50px;
left: 0;
right: 0;
position: absolute;
}
.bottom-div{
height: 50px;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
In this scenario I'm forced to use JavaScript if I want to change height of footer or header.
using calc from css3
the style:
body,html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container{
height: 100%;
background-color: silver;
}
.container,.top, .bottom, .middle{
display:block;
clear:both;
position: relative;
width: 100%;
}
.top{
height: 50px;
width: 100%;
background-color: red;
}
.bottom{
height: 50%;
position: relative;
background-color: green;
}
.middle{
background-color: blue;
overflow: hidden;
-webkit-height: calc(100% - 100px);
-moz-height: calc(100% - 100px);
height: calc(100% - 100px);
}
the markup:
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Demo: http://jsfiddle.net/YL4f3/1/
For now you have to give height to your containers. Once you have the content in place, just change the height to auto.
Also, when you change the height to auto, change the margin-top for the middle div as per your page needs.
<style>
.container div{
float:left; }
.container{
width: 100%;
height: 100%;
position: relative;
background-color: silver;
}
.top{
width: 100%;
height: 100px;
position: fixed;
top:0;
background-color: red;
}
.bottom{
width: 100%;
height: 100px;
position: fixed;
bottom:0;
background-color: green;
}
.middle{
margin-top:100px;
width: 100%;
background-color: blue;
height: 1000px;
}
</style>
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="middle"></div>
</div>