I have a parent div which has overflow:hidden. Inside a parent div, there is a dynamic div which height is more than the height of the parent div. How can I make the child div to be displayed as it is? Now it will be clipped because of the height of the parent div. I do not want to allow scrollbars to be displayed.
<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; background-color: transparent; overflow:hidden;">
<div style="width:100%;top:5px;left:150px;position:absolute;z-index:5000;background-color:#323B5A;-webkit-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);-moz-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);">
sgssgsgsgsdgsdgsgsg<br>aafafafafa<br>sgggdgdsgsgsdgdg
</div>
</div>
Update
It seems to me that this would work just fine. But I do not want to use position:relative with the child div.
<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; background-color: transparent; overflow:hidden;">
<div style="width:100%;top:5px;left:150px;position:relative;z-index:5000;background-color:#323B5A;-webkit-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);-moz-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);">
sgssgsgsgsdgsdgsgsg<br>aafafafafa<br>sgggdgdsgsgsdgdg
</div>
</div>
You could add a position:absolute to take the inner div out of the flow.
If you take the child div out of flow, using position fixed or absolute, than it would be visible. But please note: the parent div must remain static:
.holder {
position: relative;
}
.parent {
overflow: hidden;
height: 100px;
border: 1px solid blue;
}
.child {
position: absolute;
left: 10px;
top: 10px;
right: 10px;
height: 200px;
border: 1px solid red;
}
<div class="holder">
<div class="parent">
<div class="child">Visible?</div>
</div>
</div>
Also on JSFiddle.
Related
I'm trying to create a div that stays under the bottom of the page and is invisible there. I mean, you can't scroll to it. I tried to google it, but I just can't make it, neither negative bottom-margin, nor negative bottom, nor relative/absolute positioning couldn't make it...
Could anyone of you help me, please?
Here's a snippet of my site - I wanna "Menu" image to be invisible on the bottom (outside the display area), so it can then slide up when needed.
body {
overflow-x: hidden;
margin: 0;
padding: 0;
}
.main-container {
width: 100vw;
height: 100vh;
background-color: #780d0d;
position: absolute;
}
.mainmenu {
width: 70vw;
height: 82vh;
position: relative;
top: 8vh;
left: 15vw;
-webkit-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
}
.menu-bottom {
height: 20%;
width: 33.2%;
background-color: red;
border: 1px solid;
display: inline-block;
margin: 0 -5px 0 0;
}
.menu-side-holder {
height: 80%;
width: 30%;
display: inline-block;
}
.menu-side {
height: 50%;
background-color: red;
border: 1px solid;
display: block;
margin: 0;
vertical-align: top;
}
#menu-img {
height: 80%;
width: 40%;
display: inline-block;
margin: 0 -4px;
vertical-align: top;
clear: none;
}
.menu-bottom-slider {
display: inline-block;
width: 100%;
background-color: green;
}
#slider {
position: absolute;
padding-left: 43.5%;
bottom: 0;
margin-bottom: -30vh;
}
<div class="main-container">
<div class="mainmenu">
<div class="menu-side-holder">
<div class="menu-side" id="ogloszenia">
1
</div>
<div class="menu-side">
3
</div>
</div>
<img id="menu-img" src="img/main4.jpg">
<div class="menu-side-holder">
<div class="menu-side">
3
</div>
<div class="menu-side">
4
</div>
</div>
<div class="menu-bottom">
5
</div>
<div class="menu-bottom">
6
</div>
<div class="menu-bottom">
7
</div>
<div class="menu-bottom-slider">
<img id="slider" src="http://s32.postimg.org/xrrmzmohx/slider.png">
</div>
</div>
</div>
place your target div as direct child of body (not nested inside other divs) and use this style:
position:absolute;
bottom:-100% // or fixed size if height is known
One way you might be able to do this is by making it absolute and give it a negative bottom equal to the height of the element like so
.menu-bottom-slider{
position: absolute;
bottom: -(height of element goes here)px
}
Why don't you put
opacity: 0
on the element and position it where you need it ON the page. Then when you want to use it, use jQuery to change the opacity and animate it.
This would be the css of your div section.
#divname {
position:fixed;
height:50px;
background-color:red;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
Your body would look like this.
**body{
margin-bottom:50px;
}**
Your code is nearly working, but you are using overflow-x, and you need overflow-y.
EDIT:
Another way is to set the position of the slider to fixed. This means that the position does not depend on the scroll position, so you can't scroll to it:
body {
overflow-x: hidden; /* you could also change this to overflow-y */
margin: 0;
padding: 0;
}
.main-container {
width: 100vw;
height: 100vh;
background-color: #780d0d;
position: absolute;
}
.mainmenu {
width: 70vw;
height: 82vh;
position: relative;
top: 8vh;
left: 15vw;
-webkit-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
}
.menu-bottom {
height: 20%;
width: 33.2%;
background-color: red;
border: 1px solid;
display: inline-block;
margin: 0 -5px 0 0;
}
.menu-side-holder {
height: 80%;
width: 30%;
display: inline-block;
}
.menu-side {
height: 50%;
background-color: red;
border: 1px solid;
display: block;
margin: 0;
vertical-align: top;
}
#menu-img {
height: 80%;
width: 40%;
display: inline-block;
margin: 0 -4px;
vertical-align: top;
clear: none;
}
.menu-bottom-slider {
display: inline-block;
width: 100%;
background-color: green;
}
#slider {
position: fixed; /* This fixes the slider, you can't scroll to it! */
padding-left: 43.5%;
bottom: 0;
margin-bottom: -30vh;
}
<div class="main-container">
<div class="mainmenu">
<div class="menu-side-holder">
<div class="menu-side" id="ogloszenia">
1
</div>
<div class="menu-side">
3
</div>
</div>
<img id="menu-img" src="img/main4.jpg">
<div class="menu-side-holder">
<div class="menu-side">
3
</div>
<div class="menu-side">
4
</div>
</div>
<div class="menu-bottom">
5
</div>
<div class="menu-bottom">
6
</div>
<div class="menu-bottom">
7
</div>
<div class="menu-bottom-slider">
<img id="slider" src="http://s32.postimg.org/xrrmzmohx/slider.png">
</div>
</div>
</div>
https://jsfiddle.net/0Lfzbzc5/2/
in here I am trying to make the notification box on top of the body class div but couldn't do it the logic says positioned elements should be on top of the not positioned elements but that isn't happenning
tried even making body class div relative and giving it z-index but failed too
structure of notification box is an absolute element in relative element in absolute element (for CSS animation issues)
HTML
<div class="notiIcon glyphicon glyphicon-globe">
</div>
<div class='notiAbs '>
<div class='notiContainer'>
<div class="notiBox">
<div class="notiHeader">
<span class="notiHeaderSpan">notifications</span>
</div>
<div class="notiBody">
<div class="notiElement">Collaboratively enable high-quality imperatives before ubiquitous paradigms.
</div>
<div class="notiElement">Credibly productize customized services whereas.</div>
<div class="notiElement">Efficiently embrace real-time markets without.</div>
<div class="notiElement">Synergistically simplify collaborative web services.</div>
<div class="notiElement">Intrinsicly evisculate magnetic e-services through.</div>
<div class="notiElement">Holisticly build customer directed technologies.</div>
<div class="notiElement">Phosfluorescently synthesize team driven strategic.</div>
</div>
<div class="notiFooter"><span class="notiHeaderSpan">See All</span></div>
</div>
</div>
</div>
<div class="body">aasdasdasdasdasdasdas</div>
CSS
.notiAbs{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
/* overflow-y: hidden; */
height: 500px;
width: 500px;
/* overflow-x: hidden; */
overflow-y: hidden;
margin: 0 auto;
padding-left: 50px;
}
.notiContainer{
position: relative;
}
.notiIcon{
z-index: 5;
position: relative;
width:100%;
text-align: center;
font-size: 25;
cursor: pointer;
padding-top: 10px;
}
.notiIconNumber{
position: relative;
font-size: 15px;
color: white;
background-color: red;
top: -10;
left: -9;
padding: 2px;
}
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
display: block;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 4px 7px;
}
.notiElement{
overflow-wrap:break-word;
font-size: 17px;
padding: 10 0px;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: lightgray;
}
.notiHeader,.notiFooter{
text-align: center;
font-size: 20px;
font-weight: bold;
height: 15%;
display: table;
width: 100%;
}
.notiHeaderSpan,.notiFooterSpan{
display: table-cell;
vertical-align: middle;
}
.notiFooter{
box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.notiHeader{
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);
}
.notiBody{
padding: 20px;
overflow: auto;
height:70%;
}
.body{
}
It is on top but the background is transparent so it makes the illusion that it's not. Just set a background color as follows :
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
padding-top: 10px;
border-style:solid;
background:#666;
}
Check the Fiddle.
Your notification box which I believe is the element with class "notiBox" is on top. The reason why it appears not to be is because it has an inherited background-color of transparent.
If you set the background-color property to say "yellow" (for examples sake) you will see that it is on top of the element with class "body".
Does that make sense? I can explain further if you need me to.
I've updated my answer as looking at your HTML again i've realised that the element with class "notiBox" is probably the only element (and it's contents) you want to appear on top
How do I give margin to an box respective to a floated box? Here's my source code:
<!DOCTYPE html>
<html>
<head>
<title>Boxes</title>
<link rel="stylesheet" type="text/css" href="intro.css">
</head>
<body>
<div id="page">
<div id="header">
<h3 class="welcome">Welcome</h3>
<h5 class="welcome">to</h5>
<h1 class="welcome" style="color:green;font-family:cursive">Tamim's</h1>
<h5 class="welcome">page</h5>
</div>
</div>
<div class="navigation">
<ul>
<li>home</li>
<li>photos</li>
<li>important-links</li>
<li>facebook</li>
</ul>
</div>
<div id="left">
<img src="408528_10200574301423959_1609852992_n.jpg">
</div>
<div id="right"></div>
<div id="test"></div>
</div>
</body>
</html>
and
#page{
min-width:360px;
margin: 10px auto 10px auto;
background-color: rgb(32,127,224);
padding: 20px;
border: 2px solid black;
box-shadow: inset 0px 0px 10px #777777;
border-radius: 5px;
}
#header{
width: 360px;
margin: 0px auto 0px auto;
text-align: center;
}
.welcome{
margin: auto;
text-align: center;
display: inline;
}
#left{
width: auto;
margin-top: 10px;
float: left;
border: 2px inset red;
padding: 10px;
border-radius: 5px;
background-color: rgb(157,160,146);
height: 425px;
}
#right{
float: right;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
border: 2px solid green;
border-radius: 5px;
height: 425px;
width: 67%;
background-color: rgb(121,241,240);
}
.navigation{
padding: 1px 3px 3px 3px;
margin: 20px auto 20px auto;
width: 500px;
height: 40px;
background-color: red;
border-radius: 5px;
text-align: center;
}
.navigation li{
margin: 3px 6px 3px 6px;
display: inline;
border: 2px solid black;
padding: 2px;
zoom:1;
width:auto;
}
#test{
margin: 5px 5px 5px 5px;
height: 100px;
background-color: black;
clear: both;
border-radius: 5px;
}
Here's the code on Fiddle
Now when I give top a margin, it is not getting below the left or right? How do I give margin with respect to left? and also why my #lefts height is greater than right? But I have given them the same height 425px.?
Now when I give top a margin, it is not getting below the left or right?
Because you clear:both in the test - footer div. You have to set margin-bottom to the left and right see demo.
DEMO: http://jsfiddle.net/goodfriend/69QKz/14/
Why my #lefts height is greater than right?
It looks like it was caused by the padding in the left box.
DEMO with padding in left: http://jsfiddle.net/goodfriend/69QKz/6/
DEMO without padding in left: http://jsfiddle.net/goodfriend/69QKz/5/
Note: I also deleted one </div> end tag because it was closing the page div after the header..
Can't get the form to be INSIDE the frame for the life of me when using relative position. In absolute it works, but changes spots depending on window size.
Help!
Here's the outcome
http://orange-restoration.com/water-damage-24-hour-help/
Set
<div id="main">
to position:relative, then set your
<div id="main-form">
to position:absolute
<div id="main-form">
<H3>Let us call YOU back </H3>
<script type="text/javascript" src="http://form.jotform.com/jsform/92640718225"></script>
</div>
CSS:
#main-form
{
position: relative;
top: 300px;
left: 600px;
width: 300px;
height: 220px;
margin: 1px;
background-color: white;
padding: 10px 30px 30px 30px;
border-radius: 15px;
z-index: 1000;
box-shadow: 5px 5px 3px #888888;
border-style:solid;
border-width:1px;
border-color:#888888:
}
How can the parent div auto resize it's height based on the child's height?
div#main{
width: 970px;
height: 100px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
div#left{width: 383px;
height: 100%;
margin-right: 5px;
background: rgb(0,0,255);
float:left
}
div#description{width: 100%;
height: 50%;
background: rgb(0,0,0)
}
div#following{width: 100%;
height: 50%;
background: rgb(0,255,0)
}
div#posts{width: 577px;
height: auto;
margin-left: 5px;
background: rgb(255,255,0);
float: right
}
<div id="main">
<div id="left" class="cell">
<div id="description" class="cell">
</div>
<div id="following" class="cell">
</div>
</div>
<div id="posts" class="cell">
there are some contents here (height is set to auto)
</div>
</div>
I made a very simple example for you to see how variable parent height works.
.parent
{
height: auto;
border: 1px dashed #f00;
padding: 5px;
}
.child
{
height: 100px;
border: 1px dashed #0f0;
}
<div class="parent">
<div class="child">
</div>
</div>
Follow what is there and you'll do fine.
After looking through your code it's a float problem, you have to add a new div to the bottom with clear: both; to clear the floats and make the #main div appear filled in.
Look at example here.
div#main{
width: 970px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
Remove height attribute
CSS3
.container {
display: inline;
position: relative;
}
Should fix it. Use inline-block if you want it to be a block with inline.