This code runs as intended on Chrome:
Please hover over the blue ball for animation:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: absolute;
border-radius: 100%;
background-color: blue;
height:100px;
width: 100px;
transition:all 1s ease-out;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
h2:hover {
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
But the ball in the middle expands to the bottom in Firefox, and I have to set top or bottom in order to bring it back to its correct position. Is there is anyway to make it stay in the middle without assigning top and bottom value just like in Chrome?
A nice trick to center block elements in the middle of a relative positioned container, is using top: 50% and transform: translateY(-50%).
It requires IE9+
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: relative;
border-radius: 100%;
background-color: blue;
height: 300px;
width: 200px;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
<div class='container'>
<h2></h2>
</div>
JSFiddle demo: https://jsfiddle.net/oujab44t/1/
<head>
<style>
.container {
to;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
Related
The yellow box at the top works like it should. The one at the bottom does not. The scrolling should stop at the end of the footer, here as black line (and also not extend to the right).
Of course, there could be a way to to this with graphics.
Is there a solution with CSS?
#mainwrapper {
max-width: 1000px;
margin: auto;
padding-top: 100px;
position: relative;
}
.top-ci-colorbox {
position: absolute;
top: -135px;
right: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
.bottom-ci-colorbox {
position: absolute;
bottom: -135px;
left: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
...
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
View on JSFiddle
Please check this code. hope it will help you
#mainwrapper {
max-width: 100%;
margin: auto;
padding-top: 100px;
position: relative;
overflow-y: hidden;
}
#mainwrapper:before,
#mainwrapper:after{
content : "";
transform: rotate(-3.5deg);
position: absolute;
top: -60px;
left: 0;
height: 100px;
right: 0;
width: 100%;
background-color: yellow;
transform: rotate(-3.5deg);
}
#mainwrapper:after{
top: auto;
bottom: -60px;
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
</body>
</html>
html,body,#mainwrapper{
height:100%;
}
body{
margin-bottom:0;
}
#mainwrapper {
max-width: 1000px;
margin: auto;
padding-top: 100px;
position: relative;
overflow:hidden;
box-sizing:border-box;
}
main{
height: calc( 100% - 19px );
}
.top-ci-colorbox {
position: absolute;
top: -135px;
right: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
.bottom-ci-colorbox {
position: absolute;
bottom: -135px;
left: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
</body>
</html>
Check in Fiddle https://jsfiddle.net/h25d5b8z/28/
First up all you must need to set height 100% to html,body and the main element.If we absolute any item ,we must need to add property overflow:hidden to it's parent element.In this case we need to add overflow:hidden to #main-wrapper.We also need to set height to main tag element
After reading several topics about css overflow problems here on stackoverflow, I found the solution by myself. It is difficult to use overflow on only one axis because of unexpected behaviour.
Insted the #mainwrapper div needs to be wrapped in another div. This div comes with overflow: hidden.
<div style="overflow:hidden;">
<div id="mainwrapper">
...
</div>
</div>
I'm doing an exercise and although I've centered vertically previously, in this case, I'm not being able to center it.
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
position: relative;
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Add a height to the html element:
html { height: 100%; }
and it will work - the body needs space to occupy, so giving html a 100%, the body can then occupy the full 100% height.
Remove position:relative from body and it would be in center
Here is updated code
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
/*position: relative;*/
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Declare body position with 'absolute'.
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
position : absolute;
height: 100%;
width: 100%;
}
.search-init{
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
position : absolute;
top : 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Make it easy. Use div instead of html and boy. HTML will like this.
<html lang="en">
<body>
<div class="box-table">
<div class="box-table-cell">
<img src="http://placehold.it/250x150/121212/ffffff?text=Vertically+center+imag" />
</div>
</div>
</body>
</html>
CSS
.box-table{
display: table;
height: 500px;
margin-left: auto;/* If you want to center this box */
margin-right: auto;/* If you want to center this box */
text-align: center;
width: 500px;
}
.box-table{ /* This CSS for full window */
bottom: 0;
display: table;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: fixed;/* You can use absolute */
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.box-table-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
img{
vertical-align: middle;
}
body{
background-color: #ff0000;
margin: 0;
padding: 0;
}
.box-table{
background-color: rgba(0, 0, 0, 0.85);
bottom: 0;
display: table;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-right: 17px;
position: fixed;/* You can use absolute */
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.box-table-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
img{
vertical-align: middle;
}
<html lang="en">
<body>
<div class="box-table">
<div class="box-table-cell">
<img src="http://placehold.it/600x350/121212/ffffff?text=Vertically+center+imag" />
</div>
</div>
</body>
</html>
Try this
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body,html {
position: relative;
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
I'm trying to make a backdrop for a menu that will be used to detect if the user has clicked somewhere other than on the menu and close the menu.
For some reason despite setting
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
The backdrop won't stretch beyond one of the parent divs.
I've distilled the webpage to something simple and stuck it here http://codepen.io/ben_irule/pen/LZWwjL?editors=1100
<!DOCTYPE html>
<html>
<head>
<style>
.app-layout {
height: 100%;
}
.layout {
height: calc(100% - 35px);
display: block;
}
footer {
height: 35px;
background-color: green;
}
.content {
position: relative;
/* attribute of doom*/
transform: translate3D(0, 0, 0);
display: block;
height: 100%;
margin-left: 320px;
margin-right: 280px;
}
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="app-layout">
<div class="layout">
<div class="content">
<div class="menu-backdrop"></div>
</div>
</div>
<footer></footer>
</div>
</body>
</html>
I've noted one transform attribute that when disabled stops the parent div from being problematic. However when I disable the equivalent attribute in the full blown app it does not resolve the issue.
I'm interested in understanding what conditions will result in a fixed position element being bound by a parent div.
I've been searching the web all morning but haven't found anything resembling my current issue.
.content {
position: relative;
/* attribute of doom*/
transform: translate3D(0, 0, 0);
display: block;
height: 100%;
margin-left: 320px;
margin-right: 280px;
}
Margin left and margin right is what stopping you to stretch beyond what it is now. Try reducing it.
Here is a better way of doing it. See if this solves your problem. Since you have a specific numbered margin, add those to menu-backdrop.
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin-left: -320px;
margin-right: -280px;
margin-bottom: -32px;
background-color: blue;
}
This will pull the backdrop beyond the width of the containing div. A negative margin usually does the job:
.menu-backdrop {
position: fixed;
margin-left:-30px;
margin-right:-30px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
Perhaps changing your layout to this:
<body>
<div class="app-layout">
<div class="layout">
<div class="menu-backdrop"></div>
<div class="content">
Need to stretch more!!
</div>
</div>
<footer>Footer</footer>
</div>
</body>
and styling similar to:
.menu-backdrop {
position: fixed;
max-width:750px;
margin:auto;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
I am a CSS beginner.
I want a half transparent centered div with the main content. Below it should be a fixed div containing the table of contents.
Below is my attempt on this. This works with a certain browser size. But when the size of the browser window changes, the table of content moves.
I want the table of contents to stay at a fixed distance to the main div.
jsFiddle link
With this window size everything looks ok:
Decreasing the window size moves toc under content div:
html
<html>
<head>
<title>Testpage</title>
<link rel='stylesheet' href='css/testpage.css'>
</head>
<body>
<div id="contenttable">
<h1>Contents</h1>
Content 01<br>
</div>
<div id="content">
some text
</div>
</body>
</html>
css:
#content{
height: 1000px;
width: 320px;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}
#contenttable{
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
left: 6%;
}
#contenttable a{
position: relative;
top: 0px;
left: 66%;
}
#contenttable h1{
position: relative;
top: 0px;
left: 66%;
}
You can use an inner div absolutely positioned inside the fixed TOC, and set its position.
Use CSS3 Calc to elaborate the right position for your main content.
Use opacity for transparency, and avoid setting the height of the main content div for automatic overflow handing.
Demo: http://jsfiddle.net/vMAQz/1/
CSS
#contenttable {
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
}
#innerContent {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100px;
padding: 30px;
}
#content {
padding: 10px;
opacity: 0.8;
width: 320px;
position: relative;
top: 50px;
left: calc(100% - 480px);
background-color: cyan;
}
HTML
<div id="contenttable">
<div id="innerContent">
<h1>Contents</h1>
Content 01
<br/>
</div>
</div>
<div id="content">
some text
</div>
all you need to do is change the width of the content div
#content{
height: 1000px;
width: 30%;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}
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>