I have 2 main divs, one will be displayed while the other is hidden. When the hidden div appears, the previous one disappears. I know how to do that, using display block and none.
Divs A and B cover the whole screen. There should be no scroll bars showing, everything should be contained fully in what is visible in the browser window.
However, when div A is showing, the div C is also showing, even though div B (its parent) is hidden. Why?
<div id="A" style="display: block; width: 100vw; height: 100vh;">
Stuff
</div>
<div id="B" style="display: none; width: 100vw; height: 100vh;">
<div id="C" style="position: absolute; width: 25px; height: 100vh; left: 0px; top: 0px;">
<div id="D" style="position: absolute; width: calc(100vw - 25px); height: 100vh; left: 25px; top: 0px;">
</div>
Add position relative to B tag to avoid C tag from jumping to A as new parent.
Stuff
Related
I have 3 divs. The first is called "container" and the other one is called "video1". "Video1" contains the video. Here is the code.
.video1 {
position: relative;
bottom: 4rem;
left: 15rem;
height: auto;
overflow: hidden;
}
.video1 video {
width: 40rem;
}
<div class='container'>
<div class="video1">
<video src="myvideo.mp4" type="video/mp4"></video>
</div>
</div>
But when I resize the screen the video doesn't get hidden. displays outside of the div.
What should I do? Thanks.
The resizing mechanism is covered by #inner element on Chrome, but shown on Firefox.
Here is sample codes:
<div id="outer" style="width:200px; height: 30px; background: lightgreen; overflow: hidden; resize: both; position: relative;">
<div id="inner" style="position: absolute; right: 0; width: 100px; height: 100%; background: lightblue;"></div>
</div>
Result:
Chrome:
Firefox:
First question is: Which behavior is correct one? Or is there specification of what browser SHOULD do?
Second question is: I want all browsers show the resizing mechanism (just like what Firefox does), so that I can resize the #outer element. Is there any workaround?
Changed the placement of green and blue so the left side with blue was revealed and showing the resizer.
<div id="outer" style="width:200px; height: 30px; background: lightblue; overflow: hidden; resize: both; position: relative;">
<div id="inner" style="right: 0; width: 100px; height: 100%; background: lightgreen;"></div>
</div>
I have a layout whitch is something like:
<div id="content">
<div class="container">
<div id="container-overlay"></div>
<img>
</div>
<div class="container">
<div id="container-overlay"></div>
<img>
</div>
</div>
I want all my images to be the same width and in a single column, so I used display block:
#content{
position: relative;
}
.container{
display: block;
}
.container-overlay{
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
img{
width: 600px;
}
However images are displayed side by side and not in a single column, and I'm not sure why!!
You can check the real problem here: http://layouttotest.tumblr.com/
You just need to remove the position absolute on the .container, like to be seen in this fiddle http://jsfiddle.net/w89qytrs/.
position: absolute aligns the element from the top left corner of the next parent element which is position: relative.
I have some divs which contain an image that fills the whole div:
<div class="callout">
<img src="images/callout_image.gif" alt=""/>
</div>
.callout { float: left; width: 267px; height: 114px; }
Now I want to put another image in this DIV which overlaps part of the original image AND will also "pop out" of the DIV, i.e. it will extend beyond the dimensions of the DIV but the DIV itself does not extend.
I am having trouble doing this, can anyone help?
Something like this:
<div class="callout">
<img src="images/callout_image.gif" alt=""/>
<img src="images/callout_image.gif" alt="" class="pop" />
</div>
.callout { float: left; width: 267px; height: 114px; position: relative;}
.pop {position: absolute; top: 50%; left: 50%; z-index: 1;}
You might need to set overflow: visible on the div depending on the circumstances.
I have a 800 x 600 rotatable image with forward and back buttons repositioned to the sides. The height of the div is suppose to be 600px, but the actual height of the div was pushed to 690, including the height of the button image. And the div was blocking a row of clickable menu on top. So I made the div height to 518px and moved top -75px to get the real dimension I want. But I feel dirty doing this... Is there a correct way to do this? Or is this workaround more or less correct? Below is the code. Thanks!
<div class="Content Wide" id="LayoutColumn1">
<div style=" width: 980px; height: 518px; display: block; position: relative; float: left;">
<img src="/template/img/next_button.png" style="position: relative; top: 200px; left: 5px; z-index: 2;">
<img src="/template/img/chef_special_large.png" id="main" style="margin: 0 0 0 50px; position: relative; float: left; top: -75px; z-index: 1;">
<img src="/template/img/next_button.png" style="position: relative; top: 200px; left: 787px; z-index: 2;">
</div>
</div>
If you do not want your next/previous buttons to affect the flow of other content, you should use position:absolute inside a container with position:relative.