I have a div with position: fixed but when I scroll the window at the bottom the div overlaps with the footer. I dont want the div to overlap with the footer.
What changes should I make in css to overcome that.
a.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<div class="contain">
<div class="data1"></div>
<div class="data"></div>
</div>
<div class="footer"></div>
</body>
</html>
a.css
.contain {
margin-bottom: 35rem;
}
.data {
background-color: red;
width: 30%;
margin-top: -33%;
position: fixed;
height: 600px;
}
.data1 {
width: 30%;
height: 500px;
margin-left: 60%;
background-color: black;
}
.footer {
background-color: blue;
width: 100%;
height: 150px;
bottom: 0;
}
Just replace fixed with sticky. Please modify the code like below and see that works for you:
.contain {
/* margin-bottom: 35rem; */
}
.data {
background-color: red;
border: 4px solid black;
width: 30%;
bottom: 30%;
position: sticky;
height: 300px;
}
.data1 {
width: 30%;
height: 500px;
margin-left: 60%;
background-color: black;
}
.footer {
background-color: blue;
width: 100%;
height: 350px;
bottom: 0;
}
Related
I would like to have an element looking like a navbar at the top of my website:
It should be fixed, like a navbar. However, as soon as the user scrolls down, it should disappear under the rest of the content:
I tried something like that, where the #title element is the "navbar":
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="title" class="center-align">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="showcase" class="center-align">
</div>
</body>
<style>
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: -1;
}
#showcase {
margin-top: 50vh;
height: 75vh;
background-color: #212121;
}
</style>
</html>
However this is not working, the #title seems to be also affected by the 50vh margin-top (you can see it by setting its z-index to 1 instead of -1).
No need to use z-index
By default sibling are stacking by the order from bottom to top so the 1st child will at the bottom, the last child at the top. See example here:
Example of sibling z-index:
.div1 {
width: 100px;
height: 100px;
background: red;
}
.div2 {
margin-top: -50px;
margin-left: 50px;
width: 100px;
height: 100px;
background: green;
}
.div3 {
margin-top: -50px;
margin-left: 100px;
width: 100px;
height: 100px;
background: aqua;
}
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
Solution to your problem:
#title {
width: 100%;
height: 100px;
text-align: center;
position: fixed;
top: 0;
}
#showcase {
margin-top: 120px;
height: 90vh;
background: black;
}
<div id="title">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="showcase">
</div>
Try change your style with the following css . I made some changes for test purpose.
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: -1;
background: red ;
top:0;
}
#showcase {
margin-top: 50vh;
height: 275vh;
background-color: #212121;
}
Hope it helps
Here's an example using a fixed navabr and a normal div for the content having a margin-top:
body {
margin:0;
height:100%;
}
.navbar {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
background-color: lightblue;
z-index:-1;
}
.content {
width: 100%;
float: left;
height: 1000px;
margin-top: 50px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
Navbar
</div>
<div class="content">
Content
</div>
</body>
</html>
Add top: 0 to the title id. Like:
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: 1;
top: 0;
}
I have 2 div inside a wrapper div. I wanted to stack div2 below div1 but it keep overlay div 1 instead. Can anyone help ?
Here my code
CSS:
#import url('http://fonts.googleapis.com/css?family=Wallpoet');
body {
margin: 0;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: blue;
}
.div1 {
position: absolute;
background-color: #bdc3c7;
width: 100%;
height: 75%;
margin: 0;
display: block;
float: left;
left: 0;
top: 0;
}
.div2 {
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
background-color: red;
}
.compass {
position: relative;
width: 180px;
height: 190px;
float: right;
margin-top: -1%;
overflow: hidden;
}
**HTML:**
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="div1">
</div>
<div class="div2"></div>
</div>
</body>
</html>
Have try solution like using absolute position but it doesn't work.
Change the css on div2 to position relative to the bottom
.div2 {
position: absolute;
width: 100%;
height: 25%;
bottom: 0;
left: 0;
background-color: red;
}
You have used absolute positioning to specifically place the div elements at the same position. Remove the absolute positioning (and float also), and the div elements line up one below the other:
#import url('http://fonts.googleapis.com/css?family=Wallpoet');
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
height: 100%;
background-color: blue;
}
.div1 {
height: 75%;
background-color: #bdc3c7;
}
.div2 {
height: 25%;
background-color: red;
}
<div class="wrapper">
<div class="div1">
</div>
<div class="div2"></div>
</div>
Try this instead https://jsfiddle.net/2Lzo9vfc/143/
CSS
.wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: blue;
}
.div1 {
background: #bdc3c7;
width: 100%;
display: block;
height: 75vh;
}
.div2 {
background: red;
width: 100%;
height: 25vh;
display: block;
}
Your're mixing several layouyt modes. If you use floats for this then you cant't mix it with absolute positioning...
Anyway div is a block tag, what means that your two divs should stack even if you don't set any css property to them, just give the a concrete height, for example 200px.
If you want to cover the full browser viewport, that is what I think you want then is enough with this:
.wrapper {
width: 100%;
height: 100vh;
background-color: blue;
}
.div1 {
background-color: #bdc3c7;
width: 100%;
height: 75vh;
}
.div2 {
width: 100%;
height: 25vh;
background-color: red;
}
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
I try to center the <input> element in the black <div> container, but it doesn't work. What am I doing wrong?
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
}
main input {
position: absolute;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
An easy method is to set the position on the container to relative, then set the position on the input to absolute. Then just set the top/right/bottom/left of the input to zero, and margin to auto. No CSS3 transforms needed:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position: relative;
}
main input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 60%;
height: 3em;
margin: auto;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
You need to use position: relative other than position: absolute, which is centering based on the entire screen other than the parent element. Note that this will make the top part of the input box in the center. You will need to move it up a little bit by half it's height.
...
main input {
position: relative;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
}
...
It should work with transform:translateY(-50%) and give the main div position:relative . Make sure to also include the different vendor prefixes.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position:relative;
}
main input {
position: absolute;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
Make main position: relative
and your input position :absolute
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position: relative;
}
main input {
position: absolute;
top: 25%;
left: 20%;
width: 60%;
height: 3em;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
Please see the below code and screenshot. Can anyone please explain why there are white gaps between the divs and how to remove them? I would like the divs sit next to one another without any margin between them
![
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #b3b3b3;
font-family: arial;
font-size: 14pt;
}
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top: -338px;
margin-left: -552px;
top: 50%;
left: 50%;
}
#centerdiv {
display: inline-block;
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
line-height: 50px;
position: absolute;
}
#leftdiv {
position: absolute;
background-color: #ff000f;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
}
#rightdiv {
position: absolute;
background-color: #000fff;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
text-align: right;
}
#lowerrightdiv {
position: absolute;
background-color: #fff000;
width: 80px;
height: 50px;
text-align: right;
display: inline-block;
line-height: 50px;
}
.arrowimg img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="containerdiv">
<div id="leftdiv"><img class="arrowimg" src="leftarrow.png"></div>
<div id="centerdiv">
</div>
<div id="rightdiv"><img class="arrowimg" src="rightarrow.png"></div>
<div id="lowerleftdiv">?</div>
<div id="lowercenterdiv">?</div>
<div id="lowerrightdiv">?</div>
</div>
</body>
</html>
You could try to remove all your position: absolutes, as they make things complicated. What you want is: three boxes next to each other, then three boxes next to each other below it. If you float them to the left, you solve this problem. I have amended your CSS, just copy and paste and you can see the gaps disappear because floating elements don't care about whitespaces. There are other difficulties involved with floating, but it does solve your problem.
I have also removed everything I didn't need to get my point across.
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top:-338px;
margin-left:-552px;
top:50%;
left:50%;
}
// I added this to float all the divs inside your container to float
#containerdiv div {
float: left;
}
#centerdiv {
// I removed position: absolute from every box, as well as line-heights, align and display
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align:center;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
}
#leftdiv {
background-color: #ff000f;
width: 80px;
height: 576px;
}
#rightdiv {
background-color: #000fff;
width: 80px;
height: 576px;
}
#lowerrightdiv {
background-color: #fff000;
width: 80px;
height: 50px;
}
Add this to your css:
* {
margin: 0;
padding: 0;
}
This is a weird thing in how html is interpreted. The whitespace between the divs is rendered as a space. There are many ways to solve this, and none of them are very pretty.
One way is like this:
<div id="leftdiv">
<img class="arrowimg" src="leftarrow.png">
</div>
<div id="centerdiv">
</div>
<div id="rightdiv">
<img class="arrowimg" src="rightarrow.png">
</div>
<div id="lowerleftdiv">
?
</div>
<div id="lowercenterdiv">
?
</div>
<div id="lowerrightdiv">
?
</div>
Hope its fix
{
margin: 0;
padding: 0;
border-sizing: border-box;
}
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>