I am creating content div's but they currently aren't visible because a sibling div is overriding it. How can i fix this?
<!-- language: lang-css -->
/* parent */
#game {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* sibling */
#screen {
display: block;
width: 100%;
height: 100%;
overflow: hidden
}
/* div currently not visible */
.tabcontent {
padding: 5px;
border: 1px solid #ccc;
border-top: none;
font-size: 20px;
width: 320px;
height: 515px;
background: #191919;
margin: 0 auto;
}
If you want a <div> being in front of another one, you have 2 solutions
In your HTML code, put the .tabcontent div after the #screen one, so it will appear in front
You can use the z-index CSS property (which also requires position) in order to fix the draw order (which div is in front of which one)
Example for the latter:
#screen {
position: relative; /* Needed by z-index but won't actually do anything */
z-index: 0;
}
.tabcontent {
position: relative;
z-index: 1;
}
A greater z-index means it will be in front of elements with a lower z-index.
Make the parent
#game {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
}
This should bring it to the front
Related
I am using this layout for responsive div that maintains aspect ratio. It works well, but it requires overflow: hidden, to be clear it's padding-top: 56.25% defined in :after. If there is no overflow on wrapper, next element (in this case href link) is blocked.
My question is: is there a way to achieve same result without overflow: hidden on wrapper? I need some element to be visible outside wrapper without being cutting off.
Open snippet in full page if you can't see the issue within a small window.
#wrapper {
position: relative;
max-width: 1000px;
min-width: 350px;
max-height: 383px;
border: 1px solid;
/*overflow:hidden;*/
}
#wrapper:after {
padding-top: 56.25%;
display: block;
content: '';
background: rgba(0,0,0,.25);
}
<div id="wrapper"></div>
click me
You can add a inner div and make it responsive with a pseudo element like you did before, and apply overflow: hidden; on it. Then add another sibling div and set the style you wish to apply, it would be div #test in the example, as you see it will be visible outside the wrapper.
#wrapper {
position: relative;
max-width: 1000px;
border: 1px solid;
}
#inner {
min-width: 350px;
max-height: 383px;
overflow: hidden;
}
#inner:after {
background: rgba(0,0,0,.25);
padding-top: 56.25%;
display: block;
content: '';
}
#test {
position: absolute;
right: 0;
bottom: 0;
transform: translateY(100%);
width: 100px;
height: 50px;
background: aqua;
}
<div id="wrapper">
<div id="inner"></div>
<div id="test"></div>
</div>
click me
I've a fixed side bar on the right side of the page (position: fixed)
But it's contents are not fully visible as it's not scrolling with the page scroll. I could have added overflow-y: scroll in the .sidebar{} css settings. But don't want a separate scroll bar for sidebar. Is there an option to make it scroll with the full page scroll.
Here is my css settings for sidebar :
.sidebar {
text-align: center;
padding: 2rem,1rem;
color: rgba(255,255,255,.5);
background-color: #202020;
top: 0;
bottom: 0;
}
If you want to debug to see what went wrong, here is it running live : https://pagefault.me
Thanks
Based on the answer I suggested in my comment, I was able to work in chrome to arrive at the css below.
1) Add some css to the .sidebar-nav component
nav.sidebar-nav {
position: absolute;
overflow-y: scroll;
top: 100px; /*100px to give some room for the sidebar heading (without this, absolute position will make the nav overlap)*/
left: 15px; /* you can make this zero and add `padding-left: 15px` */
bottom: 15px; /* leave some room for copyright section */
right: -17px; /*this may vary from browser to browser (i suggest using the width of the widest scrollbar, then adjust for padding-right)*/
padding-right: 15px; /*padding to prevent the text from flowing off screen*/
}
2) The .container class becomes
.sidebar .container{
max-width: 38rem;
padding-left: 1rem;
padding-right: 1rem;
margin-left: auto;
margin-right: auto;
height: 100%;
position: relative;
overflow: hidden;
}
3) Make sure the footer bit remains at the bottom after making .sidebar-nav absolute
.sidebar .container > p:last-of-type {
position: absolute;
bottom: -15px;
}
Of course as mentioned in the original solution, you have to test the scrollbar widths in different browsers to arrive at the right width to use in place of right: -17px in step 1.
Use absolute position instead of fixed as you want it to scroll it along with the page.
body {
margin: 0;
padding: 0;
position: relative;
}
main {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 300vh;
background: beige;
}
aside {
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside><aside>
A flex box solution without positioning :
body {
margin: 0;
padding: 0;
display: flex;
}
main {
width: 80%;
height: 300vh;
background: beige;
}
aside {
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside></aside>
I'm in difficulty: I have a parent element that has a size that doesn't know. And I have an item that it must place permanently at the top of the body, then position: fixed, but I cann't because giving it width: 100%, is 100% of the body, but I want 100% of the parent element. How can I do?
Example: http://codepen.io/michele96/pen/jWbYQb
set .fixed's width as width: inherit; don't use 100%
body {
padding: 0;
margin: 0 auto;
}
.container {
position: relative;
width: 70%;
height: 1000px;
background: red;
}
.fixed {
position: fixed;
width: inherit; /*change here*/
line-height: 50px;
background: blue;
color: #f0f0f0;
text-align: center;
font-size: 20px;
}
<div class="container">
<div class="fixed">Navbar Fixed</div>
</div>
The problem is that, unlike absolutely positioned elements, the containing block of a fixedly positioned element is usually the viewport, not its nearest positioned element. Then, width: 100% is resolved with respect to the viewport width.
There are ways to change this behavior, e.g. elements with transform establish a containing block for their fixedly positioned descendants. But then your element won't be fixed at the top of the viewport.
Instead, you should use sticky positioning:
.fixed {
position: sticky;
top: 0;
}
body {
padding: 0;
margin: 0 auto;
}
.container {
width: 70%;
height: 1000px;
background: red;
}
.fixed {
position: sticky;
top: 0;
line-height: 50px;
background: blue;
color: #f0f0f0;
text-align: center;
font-size: 20px;
}
<div class="container">
<div class="fixed">Navbar Fixed</div>
</div>
Note it's not widely supported yet.
Set transform: translate3d(0, 0, 0); to the parent.
I'm trying to layout a screen using div's and CSS. It's a simple layout at this point but I can't seem to get the div's to line up. I want one wrapper div with two div's within it: one aligned to the left and one aligned to the right. However, they end up on top of each other.
I know this question is simple. What am I missing here?
If I reduce the width of the right div to 60% it lines up right but shouldn't I be able to use 100% of the width of the parent div?
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Float left your children elements:
jsBin demo
#product_wrapper > *{float:left;}
Note that inline-block causes the inner elements to actually act like inline elements
where white spaces count!
SO another way would be to modify your HTML removing the NewLine separator:
jsBin demo
<div id="images_wrapper">
Foo content
</div><div id="content_wrapper">
^^-------------------------------------- no space here
Bar content
</div>
The third way (the worst one) is to set font-size to 0 for the parent (will remove logically the child's white-space gap since is now '0'); >> and than reset the font-size for children elements to px (cause em will not work since parent has 0).
But that's a good way to loose track of dynamic and responsive font sizes expecially if you use em and size inheritances.
The problem is the whitespace in the html, which occupies some space between the elements.
One way of fixing it is
#product_wrapper {
font-size: 0; /* Hide whitespace in the html */
}
#images_wrapper, #content_wrapper {
font-size: 16px; /* Reset to whatever vaue */
}
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
font-size: 0;
}
#images_wrapper, #content_wrapper {
font-size: 16px;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Use float:left instead of display:inline-block
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
float:left;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
float:left;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Problem here: http://jsfiddle.net/x8XZ6/3/
HTML
<div id="top"></div>
<div id="content">Why this div is not 100% height? I need this to fill all the way to the start of the footer if content is to little. If content extends beyond the blue footer, it should push the footer down.</div>
<div id="anchored-footer"></div>
CSS
* { margin: 0; padding: 0 }
html { height: 100%; }
body {
position: relative; min-height: 100%;
height: 0;
/* height: 0; interestingly, if height is set to 0, it expands 100% (see also #content margin-bottom) */
/* but I need it to extend up to the blue bar only. */
}
#top {
height: 50px;
background-color: red;
}
#anchored-footer {
position: absolute;
bottom: 0;
height: 50px;
background-color: blue;
width: 100%;
}
#content {
border: 5px solid green; /* because I need this border to go all around the content area */
background-color: yellow;
height: 100%;
/* margin-bottom: -50px; can a negative margin work here? */
}
Can this be achieved without using absolute positioned header?
You DO need to change BODY to height:100%;
working demo
css
* { margin: 0; padding: 0 }
html { height: 100%; }
body {
position: relative; height: 100%;
}
#top {
height: 50px;
background-color: red;
}
#anchored-footer {
bottom: 0;
height: 50px;
background-color: blue;
width: 100%;
}
#content {
border: 5px solid green; /* because I need this border to go all around the content area */
background-color: yellow;
min-height:calc(100% - 110px);
}
*Notice: No position:absolute is used at all.. you don't need it, especially if you want your content to push your footer down.. then definitely don't use absolute.
I would recommend doing the below:
body {
position: relative;
min-height: 100%; /* to fill screen 100% even with less content */
height: 100%; /* to allocate only 100% height */
}
#top {
height: 50px;
background-color: red;
top: 0;
}
#anchored-footer { /* No absolute positioning */
height: 50px;
background-color: blue;
width: 100%;
}
#content {
border: 5px solid green;
background-color: yellow;
min-height: calc(100% - 110px); /* allocate the remaining height except the header + footer + borders and assign as minimum height */
height: auto; /* allow content to expand when height exceeds the min height */
}
Demo | Demo with lot of content
If you ara not worrying about IE8 browsers then you can use calc property to achieve this.
html, body{width:100%;}
#content {
border: 5px solid green;
background-color: yellow;
height:calc(100% - 110px); /* 50px header + 50px footer + 10px border */
}
DEMO