I am using two divs to create the look of a two-tone background. behind my container div, the left side is blue and the right side is yellow. My css for these column divs is:
#bluecol{
height:100%;
background-color: #5C8AE6;
display: inline;
float: none;
left: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;}
and for the yellowcol is the same, except positioned to the right, naturally. Currently both divs works fine but I cannot get them to match the height of the content within my container, I can only set the height manually or to 100%, which only takes up the browser's window. My container is set to height:max-content so is unhelpful in this situation.
I want the two column divs to match whatever the containers height is. Any suggestions would be great!
Js fiddle: https://jsfiddle.net/ak0kp9xd/
Try like this: Demo
html, body {
height: 100%;
overflow: hidden;
position: relative;
}
#bluecol {
height:100%;
background-color: #5C8AE6;
display: inline;
float: none;
left: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;
}
#yellowcol {
height:100%;
background-color: rgb(255, 204, 0);
display: inline;
float: none;
right:0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;
}
#container {
background-color:#E5ECFB;
font-family:'calibri';
margin:10px;
overflow:hidden;
z-index:5;
font-size:medium;
height: 100%;
}
Your background blocks must be inside #container to take it's height.
Also you can use :before to reduce HTML markup:
#container {
position: relative;
background-color: rgb(255, 204, 0);
padding: 10px;
}
#container:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background-color: #5C8AE6;
display: block;
z-index: 1;
}
#container .content {
position: relative;
z-index: 10;
background-color: #E5ECFB;
border-right: 11px solid #FFE994;
border-left: 11px solid #AFC6F3;
}
<div id="container">
<div class="content">Whatever</div>
</div>
Related
So how can I set an element's inner position fixed to middle of screen? I was able to set the x-axis of the div by using text-align: center;.
So how could I center the y-axis just like I did the x-axis? And if that can't be done, what new method must I use?
Code:
.fixed{
text-align: center;
width: 100%;
height: 100%;
padding: 0px;
position: fixed;
background-color: #00FF00;
top: 0px;
overflow: hidden;
z-index: 99;
}
.popup{
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72, 72, 72, 0.4);
margin-bottom: 50px;
margin-top: 20px;
}
<div class="fixed">
<div class="popup"></div>
</div>
I updated your fiddle. Just make your popup class position fix and make top,left,bottom,right = 0 then margin:auto. See this updated fiddle.
.popup{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
https://jsfiddle.net/norxpmbr/
For .popup, try replacing this:
margin-bottom: 50px;
margin-top: 20px;
With this:
position: relative;
top: 50%;
transform: translateY(-50%);
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
So this is what I did to your code- removed the margins for popup and centered using transform and position: relative:
.popup{
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72,72,72,0.4);
margin : 0;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
revised fiddle
Snippet below:
.fixed {
text-align: center;
width: 100%;
padding: 0;
position: fixed;
background-color: #00FF00;
height: 100%;
top: 0;
overflow: hidden;
z-index: 99;
}
.popup {
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72, 72, 72, 0.4);
margin: 0;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
<div class="fixed">
<div class="popup">
</div>
</div>
As demonstrated here: http://codepen.io/anon/pen/rVPqeL
I am using 3 simple divs and I want to obtain an effect of a "global" scrollbar that has to go over the header.
The html is very basic
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
</div>
and here's the css:
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
.content {
margin-top: 50px;
min-height: 2500px;
background-color: blue;
}
The scrollbar keeps going under the header div. What am I doing wrong?
The below code does the trick
http://codepen.io/anon/pen/XbOxgp
.container {
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
z-index: 2;
}
.content {
z-index: 1;
width: 100%;
position: absolute;
top: 60px;
min-height: 2500px;
background-color: blue;
}
If I understand correctly you want the scrollbar always ontop. To do so change your css to the following
html{
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
Scroll on html will allow the entire page to have scroll while keeping header static and remove scroll from container.
.container {
margin-top:50px; /* create room for header*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
margin-top:-50px; /* move up by 50px*/
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
fixed positioned elements have "no width and height".
Hope it helps :)
EDIT: See this pen: This
Ps. I guess you also want to remove the margin of .content
i tried with replacing position:fixed with position:sticky and added top:0 and it worked well for me, no more overlapping vertical scrollbar.
.header {
position: sticky;
top: 0;
width: 100%;
height: 50px;
background-color: red;
}
Remove overflow-y: scroll; from your .container
put the overflow-y: scroll; inside the body element:
body {
overflow-y: scroll;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
I'm trying to create a "button" with 2 sections (each is 50% of the height of the div) separated by an horizontal bar. Each of the sections has centered text. The size of the button is going to be manipulated using javascript, and I'm trying to avoid also using javascript to position the elements inside the "button".
What I have so far is http://jsfiddle.net/u5u7d31p/2/, but i'm having a problem centering the horizontal bar. If I change the position of the separator to relative, the bar is centered, but then it changes the position of the bottom part of the text. I can also change the margin to a static value (margin: 0 63px;) to center it, but I would like to avoid it if there is an easier solution that doesn't require javascript.
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
Any ideas? Thanks.
All codes are ok. Just put this css below to .img_overlay .separator class.
Full code is below:
.img_overlay .separator {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
right: 0;
}
view my demo on jsfiddle
.img{
float: left;
background-repeat:no-repeat;
background-size:100% 100%;
border-radius: 4px;
width: 200px;
height: 51px;
background: red;
overflow: hidden;
}
.img_overlay{
width: 100%;
height: 100%;
background: #222;
color: #ddd;
position: relative;
opacity: 0.8;
}
.img_overlay>div{
display: block;
width: 100%;
height: 50%;
text-align: center;
position: relative;
}
.img_overlay .middle{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.img_overlay .separator{
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
<div class="img">
<div class="img_overlay">
<div class="img_show_details">
<div class="middle">details</div>
</div>
<div class="img_open">
<div class="separator"></div>
<div class="middle">open</div>
</div>
</div>
</div>
All I did was taking off :
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
}
This following fix works okay in firefox and chrome but mess in IE.
I fixed height in div, top in middle and top in separator
.img_overlay>div {
display: block;
width: 100%;
height: 40%;
text-align: center;
position: relative;
}
.img_overlay .middle {
position: relative;
top: 60%;
transform: translateY(-50%);
}
.img_overlay .separator {
position: relative;
top: 5px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
here's the demo in jsfiddle.
I have a div (fixed) which acts like a pop up:
<body>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
</body>
This css allows the container to be horizontally centered (having a 100% width makes everything behind it unclickable; thus, I set it to 1px):
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 1px;
z-index: 9999;
}
.popup-item {
display: block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
However, I am unable to center .popup-item due to the parent element .popup-container being smaller than its child. How do I center .popup-item while still being able to click it (pointer-events: none entirely disabled it)?
Vote to Close almost has it, but with the 1px width, the element doesn't get centered.
Do this instead:
.popup-container {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
text-align:center;
height:0px;
}
.popup-item {
display: inline-block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
This will make it centered, because the container is 100% wide. However, pointer-events:none; will allow you to click through to anything below it.
A couple of solutions.
First, you can make the child of the container centered using translateX() transform: http://jsfiddle.net/Yjz5R/. The same effect can be accomplished using negative margins, but the width for the container's child has to be set: http://jsfiddle.net/9Qmza/.
CSS:
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Or second, you can make the container "immune" to click events:
Markup:
<input type = "checkbox" id = "clickToggle" />
<label for = "clickToggle">Click me</label>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
Styles: http://jsfiddle.net/CVfHt/.
.popup-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(200, 200, 200, 0.5);
pointer-events: none;
}
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: all;
}
input[type = "checkbox"] {
display: none;
}
input[type = "checkbox"] + label {
cursor: pointer;
}
input[type = "checkbox"]:checked ~ div {
display: none;
}
Lastly, a question/comment. If you do not want the container to be visible, then why use it at all? Just keep the markup of the child and get rid of the container: http://jsfiddle.net/yvc4E/.
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto; /* remove this line - unnecessary*/
margin-right: auto; /* and this line, remove */
width: 1px;
z-index: 9999;
text-align: center; /* add this */
}
.popup-item {
display: inline-block; /* change to inline-block */
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
here is my issue:
<div class="wrap">
<div class="inner"></div>
</div>
.wrap {
position: relative;
width: 200px;
height: 66px;
background: black;
overflow: hidden;
border-radius: 100px;
}
.inner {
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
background: white;
}
http://jsfiddle.net/cjW7Q/1/
Notice thin black line on the right side.
Any ideas how to get rid of it?
UPDATE
There is a lot of workarounds, but problem is that overflow:hidden doesn't work correctly. Imagine that instead of .inner I have an image, that I want to move around with transition using transform (for hardware acceleration). I'll try to update demo later.
<edit>multiple bg mixing image and gradient can be used with animation too without extra markup DEMO </edit>
This is a commun defaut , you see it in FF too.
I would say , paint it the other way round :
.wrap doesn't even need a bckground color.
http://jsfiddle.net/cjW7Q/2/
.wrap {
position: relative;
width: 200px;
height: 66px;
overflow: hidden;
border-radius: 100px;
}
.inner {
position: absolute;
top: 0;
width: 50%;
left:0;
bottom: 0;
background: black;
}
Else you can use a gradient and no inner element:
.wrap {
position: relative;
width: 200px;
height: 66px;
overflow: hidden;
border-radius: 100px;
background:linear-gradient(to left,white 50%,black 50%);
}
DEMO
Here's a Work Around
.inner {
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
background: black;
}
Apply the same background of it's parent for the parent element (here there's no need of background at all)
Add "border-right-width: 0px;" to .wrap.
Try this CSS,
.wrap {
position: relative;
width: 200px;
height: 66px;
background: black;
overflow: hidden;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.inner {
position: absolute;
top: 0;
right: 0;
left: 50%;
bottom: 0;
background: white;
}
DEMO
border:0px
paddind : 10 px
background:#FFF