I have a very simple problem, but I can't solve it.
There is a div inside another div. The inner div is positioned absolutely out of the outer div (left: 100%). Moreover, the outer div should scroll vertically. However, I can't find how not to scroll horizontally and how to make the inner div be visible outside the outer div, at the same time.
The code is the following:
HTML:
<div id="out">
<div id="in">
</div>
</div>
CSS:
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
overflow-y: scroll;
overflow-x: visible;
}
#in{
position: absolute;
left: 100%;
height:50px;
width:50px;
background-color: red;
}
Thanks in advance!
.main_outer{
overflow-y:scroll;
border:thin black solid;
overflow-x:hidden;
}
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
}
#in{
position: absolute;
left:100%;
width:70px;
height:auto;
background-color: red;
right:0;
}
<div class="main_outer">
<div id="out">
<div id="in">
Your Inner Contents
Your Inner Contents
Your Inner Contents
</div>
</div>
</div>
Here is JSFiddle
PS: Change your red div size to fit your contents.
Hope this helps.
Fixed the scroll with removing the overflow-x:hidden;
================ Latest Change ======================
See the latest change if this is what required but a little tweak in markup.
#outer-div {
overflow-y: scroll;
width: 165px;
}
#out{
height:100px;
width:100px;
background-color: green;
position: relative;
}
#in{
position: absolute;
left: 100%;
height:50px;
width:50px;
background-color: red;
}
<div id="outer-div">
<div id="out">
<div id="in">
</div>
</div>
</div>
Related
I have to make a div follow an image and sit on its center vertically and horizontally when responsive. I simply have no idea or don't think whether it is possible only by css. Any help is appreciated
.imageWrapper {
height:200px;
width:200px;
position:relative;
margin:50px auto 0px auto;
}
.imageWrapper > div:first-child {
position:absolute;
z-index:1;
top:0px;
left:0px;
right:0px;
bottom:0px;
overflow:hidden;
}
.imageWrapper > div:first-child img{
height:200px;
width:100%;
object-fit:cover;
position:relative
}
.imageWrapper > div:last-child {
position:relative;
z-index:2;
text-align:center;
line-height:200px;
height:200px;
width:100%;
}
<div class="imageWrapper">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Billede_084.jpg"></div>
<div><p>bla bla</p></div>
</div>
make a wrapping div, make the image absolute as a background and place the text in front of the image.
Well you can make good use of an old trick to center element using position property.
as usual an example is better than an explanation.
.html
<div class="parent">
<div class="child"></div>
</div>
.css
.parent {
position: relative;
width: 100%;
height: 200px;
background-color: lightblue;
}
.parent .child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: grey;
}
Im trying to place background divs behind the container. I thought i would place one div at the top and one at the bottom. Then make the container have a position:relative. But only the top goes behind the container. This is what it looks like
http://oi62.tinypic.com/2lm3mvk.jpg
And this is how i want it to look like
http://oi57.tinypic.com/5zjjvs.jpg
Both blue divs are suppossed to be behind and the brown div is the container. The red divs are header/footer. How am I suppossed to do this?
<body>
<div id="wrapper">
<div id="top"></div>
<div class="blueLeft"></div>
<div class="padding"></div>
<div id="container"></div>
<div class="blueRight"></div>
<div id="bottom"></div>
</div>
</body>
#wrapper{
width:100%;
height:100%;
}
#top,#bottom{
background-color: red;
width:100%;
height:200px;
clear:both;
}
#container{
background-color: brown;
width:800px;
height:600px;
margin:0 auto;
position: relative;
}
.blueLeft{
width: 100%;
height: 200px;
background-color: blue;
float:left;
}
.blueRight{
width: 100%;
height: 300px;
background-color: blue;
float:right;
}
See if this is what you wanted.
http://jsfiddle.net/vleong2332/pq3823tz/
<div id="wrapper">
<div id="top"></div>
<div class="blueTop"></div>
<div class="padding"></div>
<div id="container"></div>
<div class="blueBottom"></div>
<div id="bottom"></div>
</div>
CSS
#wrapper{
width:100%;
height:100%;
position: relative;
}
#top,#bottom{
background-color: red;
width:100%;
height:200px;
clear:both;
}
#container{
background-color: brown;
width:800px;
height:600px;
margin:0 auto;
position: relative;
}
.blueTop{
width: 100%;
height: 200px;
background-color: blue;
position: absolute;
}
.blueBottom{
width: 100%;
height: 300px;
background-color: blue;
position: absolute;
bottom: 200px;
z-index: -1;
}
On HTML, I changed the class to blueTop and blueBottom since they would be more accurate semantically.
On CSS, since I don't think you'd need the float, I removed them. I used position: absolute on the blue divs. The top one doesn't need to be re-adjusted because the flow already puts it where you want it. For the bottom, I need to position the bottom on top of the red since it goes against the normal flow. z-index is to put the blueBottom behind the brown div.
Hope this helps.
Using your example, you could just give #container a negative margin equal to the height of the second blue div.
So for example:
#wrapper{
width:100%;
height:100%;
}
#top,#bottom{
background-color: red;
width:100%;
height:200px;
clear:both;
}
#container{
background-color: brown;
width:800px;
height:600px;
margin:0 auto;
position: relative;
margin-bottom: -300px;
}
.blueLeft{
width: 100%;
height: 200px;
background-color: blue;
float:left;
}
.blueRight{
width: 100%;
height: 300px;
background-color: blue;
float:right;
}
<body>
<div id="wrapper">
<div id="top"></div>
<div class="blueLeft"></div>
<div class="padding"></div>
<div id="container"></div>
<div class="blueRight"></div>
<div id="bottom"></div>
</div>
</body>
However, you may want to consider doing this differently.
The issue you're having isn't that your #container element is "on top" of your bottom blue float in a Z-axis way, it's that it's above it vertically in the document (basically, the float is clearing your #container.
Try adding margin-top: -300px; to your .blueRight CSS and see if that gives you what you are looking for.
Need help to display the inner most div over the parent without scroll.
I don't want any scroll on parent div when child div display:block.
and I cant remove .divrelative{position:relative;},
and i have fixed hight of parent.
.parent{background:#ccc; padding:10px; height:100px; overflow-y:auto;}
.divrelative{position:relative;}
.child{ background:#fff; width:80%; height:180px; border:1px solid #000; position:absolute; z-index:9999;}
<div class="parent">
<div class="divrelative">
<div class="child"></div>
</div>
</div>
You spoke about "over the parent" in this case, if you accept overlap, simply remove "overflow-y:auto" rule.
.parent {
background: #ccc;
padding: 10px;
height: 100px;
}
.divrelative {
position: relative;
}
.child {
background: #fff;
width: 80%;
height: 180px;
border: 1px solid #000;
position: absolute;
z-index: 9999;
}
<div class="parent">
<div class="divrelative">
<div class="child"></div>
</div>
</div>
change the position to absolute
.parent{background:#ccc; padding:10px; height:100px;}
.divrelative{position:relative;}
.child{ background:#fff; width:80%; height:180px; border:1px solid #000; position:absolute; z-index:9999;}
I'm new with DIV's and I would like to build a simple template for my website.
I need the header to be fixed and 100%, left panel for menu 200px, right panel for main 100% div and bottom panel.
I need that if the left panel doesn't show that the main will be 100%. now if it show's the "main" div in under the left panel. 10X
<div id="top_menu"></div>
<div id="left_menu"></div>
<div id="main"></div>
<div id="bottom"></div>
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
#left_menu{
margin-top:40px;
float: left;
width: 200px;
background: #F4F4F4;
position: fixed;
z-index: 10;
}
#main{
margin-top:40px;
float: right;
background:red;
padding:30px;
width: 90%;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}
Update your HTML and CSS like below.
HTML
<div id="top_menu"></div>
<div class="distab">
<div id="left_menu"></div>
<div id="main"></div>
</div>
<div id="bottom"></div>
CSS
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
.distab{display:table; table-layout:fixed;}
#left_menu{
margin-top:40px;
width: 200px;
background: #F4F4F4;
z-index: 10;
display:table-cell;
}
#main{
margin-top:40px;
background:red;
padding:30px;
width: 100%;
display:table-cell;
box-sizing:border-box;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}
DEMO
<div id="top_menu"></div>
<div id="content">
<div id="left_menu"></div>
<div id="main"></div>
</div>
<div id="bottom"></div>
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
}
#lineContainer{
overflow: hidden; /* clear the float */
}
#left_menu{
margin-top:40px;
float: left;
max-width: 200px;
background: #F4F4F4;
}
#main{
margin-top:40px;
background:red;
padding:30px;
overflow: hidden;
}
#bottom{
height:30px;
width:100%;
}
Demo here:
http://jsfiddle.net/msankhala/Ck7pe/3
http://jsfiddle.net/msankhala/Ck7pe/3/embedded/result/
for this you have to put your left menu and main under one div & put leftMenu to the height of 20% and then you will see that main had automatically taken remaining area of its parent div and when leftMenu get disappeared main will automatically take the full 100% area.
You can use Javascript for disappearing purpose but jquery is best to do this all task.
I have a div element that scrolls vertically; the scrollbar is within the div element itself. I'd like to have the scrollbar outside of the div, similar to how a typical webpage scrollbar is. Scrollbar looks like any other webpage, but when scrolled only scrolls this particular div element.
<div id="outer">
<div id="inner"> //to be scrolled
<!-- content -->
</div>
</div>
Example Fiddle: http://jsfiddle.net/7pgyt/
I'd like the scrollbar to be to the far right, in the red area. The scrollbar scrolls the blue area. Can this be accomplished in just HTML and CSS?
A possible outcome would be as below:
Given the following html structure:
<div id="wrapper">
<div id="top" class="bar"></div>
<div id="outer">
<div id="inner"></div>
</div>
<div id="bottom" class="bar"></div>
</div>
You can use the following styles:
#wrapper {
position:relative;
height:200px;
}
#outer {
background-color: red;
overflow-y:auto;
height: 200px;
}
#inner {
color: white;
font-weight: bold;
margin-left: auto;
margin-right: auto;
background-color: blue;
margin:50px;
position:relative; z-index:1;
}
.bar {
height:50px;
z-index:2;
position:absolute;
background:red;
left:0;
right:20px;
}
#bottom {bottom:0;}
#top {top:0; }
Example
Example with psuedo selectors instead of the bar divs
You can use the below:
Demo Fiddle
HTML
<body>
<div id="outer"></div>
<div id="inner">..content...</div>
</body>
CSS
body {
position:relative;
width:100%;
margin:0;
padding:0;
}
div {
box-sizing:border-box;
}
#outer {
border:50px solid red;
padding: 50px;
position:absolute;
height:200px;
right:17px;
left:0;
}
#inner {
color: white;
font-weight: bold;
height: 200px;
padding:50px;
margin-left: auto;
margin-right: auto;
overflow-y: scroll;
background-color: blue;
}