I have 3 elment in my page. They are outer, middle and inner.
html code:
<div class="outer">
<div class="middle">
<div class="inner">
inner suppose to stay at the bottom of the outer.
</div>
</div>
</div>
css code:
.outer {
position: fixed;
top: 20px;
max-width: 400px;
background: red;
height: 400px;
overflow: auto;
width: 200px;
}
.middle {
width: 100%;
height: 800px;
padding: 100px 0;
position: static;
background: green;
}
.inner {
width: 100%;
position: absolute;
height:100px;
background: yellow;
bottom: 0
}
I think inner should stay at the bottom of outer. However, I doesn't. Can anybody tell me why?
Set your middle class to position relative.
.middle {
position: relative;
}
This fixes your problem, but unfortunately I can't give a good explanation why. Maybe someone else will.
As i understood you want to be able to scroll over middle and always have inner at the bottom of outer.
<div class="outer">
<div class="scrollableContainer">
<div class="middle">
</div>
</div>
<div class="inner">
inner suppose to stay at the bottom of the outer.
</div>
</div>
<style>
.outer {
position: fixed;
top: 20px;
max-width: 400px;
width: 200px;
background: red;
height: 400px;
}
.scrollableContainer {
max-width: 400px;
width: 200px;
height: 400px;
overflow: auto;
}
.middle {
border: dotted;
width: 100%;
height: 800px;
padding: 100px 0;
position: relative;
background: green;
}
.inner {
width: 100%;
height: 100px;
position: relative;
background: yellow;
bottom: 0
}
</style>
Or if you wanted to have the inner always on the bottom of the middle then the solution from Frutis works but i have also no explanation. And you could put the inner outside the middle into the outer under the middle (what?)
like this:
<div class="outer">
<div class="middle">
</div>
<div class="inner">
inner suppose to stay at the bottom of the outer.
</div>
</div>
and make your inner relative.
I have achieved this, the problem is the width of inner, can't use 100% because overlap the scrollbar. I set in 184px and works fine in my PC with Chrome and Firefox but maybe in others browser or SO is not the best value:
.dummy {
position: relative;
width: 200px;
}
.outer {
max-width: 400px;
background: red;
height: 300px;
overflow: auto;
width: 200px;
}
.middle {
width: 100%;
height: 800px;
padding: 100px 0;
background: green;
}
.inner {
width: 184px;
position: absolute;
height: 100px;
background: yellow;
bottom: 0;
}
<div class="dummy">
<div class="outer">
<div class="middle">
<div class="inner">
inner suppose to stay at the bottom of the outer.
</div>
</div>
</div>
</div>
Related
I am looking to create this kind of card layout how to get that blue on both side of the card.
The only thing i would like to know is how to get that blue on left and right side of the card.
.card {
height: 300px;
width: 400px;
background: #f1f1f1;
}
<div class="card">
<h2>Title</h2>
</div>
You need to wrap The card with container with two childern.
1- Then add overlay div with absolute positioning (this will be the blue side)
2- The card (white div)
N.P: I've added flex to body just to center the card, no need for it.
Example:
body {
background-color: gray;
display: flex;
}
.card-container {
position: relative;
height: 300px;
width: 400px;
margin: auto;
}
.overlay {
position: absolute;
top: 5%;
left: 0;
width: 100%;
height: 90%;
background: linear-gradient(#4180B9, #42BDBB);
border-radius: 5px;
}
.card {
z-index: 2;
position: relative;
width: 90%;
height: 100%;
margin: auto;
background-color: #fff;
border-radius: 5px;
}
<div class="card-container">
<div class="overlay"></div>
<div class="card">
</div>
Simply I want the content to scroll under the fixed header but the modal in the top of the header. if I removed the position: relative; from the .content it will work fine but I can't remove it in my real project there are hundreds of children using it and other properties creating new stacking context. thanks for help.
here is html html:
<div>
<div class="header">
</div>
</div>
<div class="content">
<div class="modal">
</div>
</div>
CSS:
.header {
position: fixed;
top: 0;
height: 100px;
width: 100%;
background: blue;
}
.content {
margin-top: 115px;
height: 1000px;
width: 100%;
background: yellow;
position: relative;
}
.modal {
position: fixed;
top: 25%;
left: 25%;
height: 50%;
width: 50%;
background: red;
z-index: 10;
}
and also fiddle
I'm new to CSS. I'm trying to position a div (#inner) in the bottom-right corner of another div (#container).
I wrote float: right; but when running the Html I see the inner div in the bottom-left corner of the container. Why is that? What's wrong with the code?
#container {
position: relative;
border: solid;
width: 70%;
height: 40%;
}
#inner {
position: absolute;
border: solid;
bottom: 0;
float: right;
width: 30%;
height: 30%;
}
<div id="container">
<div id="inner">
ABC
</div>
</div>
Using float with absolute positioning doesn't really make sense. I think what you want is right:0 instead of float:right
#container {
position: relative;
border: solid;
width: 70%;
height: 40%;
overflow: auto;
}
#inner {
position: absolute;
border: solid;
bottom: 0;
right:0;
width: 30%;
height: 30%;
}
body,
html {
height: 100%;
}
<div id="container">
<div id="inner">
ABC
</div>
</div>
Just remove the absolute position. Also, if you want the container to wrap the float/s, add "overflow: auto" to the container element:
#container {
position: relative;
border: solid;
width: 70%;
height: 40%;
overflow: auto;
}
#inner {
border: solid;
bottom: 0;
float: right;
width: 30%;
height: 30%;
}
<div id="container">
<div id="inner">
ABC
</div>
</div>
you must remove "position: absolute"
I have a div ".container" with two divs: first ".blue" and second ".green".
I got my green div fixed to the bottom-0, but I need to put the first div blue to backboard the green div.
http://jsfiddle.net/washington_guedes/k959kmqd/
css:
.container{
position: relative;
width: 100%;
}
.blue{
position: relative;
width: 100%;
background-color: #acf;
}
.green{
position: fixed;
bottom: 0;
width: 100%;
height: 250px;
background-color: #bfb;
}
html:
<!-- some divs before -->
<div class="container">
<div class="blue">Blue</div>
<div class="green">Green</div>
</div>
You could set both div to be absolute position and then play with whatever you need to do:
.container{
position: relative;
width: 100%;
}
.blue,
.green {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 250px;
}
.blue{
background-color: #bbf;
}
.green{
background-color: #bfb;
top: 250px;
}
Divs in top of each other http://jsfiddle.net/vfpzbj9q/
Divs overlapping http://jsfiddle.net/wkkyoz0h/
i want to place the div according to the image displayed . The top ones have been done however not able to place the bottom two my current style sheet is as follows:
#container {
position: relative;
height: 400px;
width: 100%;
min-width: 400px;
margin: 0 auto;
}
#left, #right {
position: absolute;
bottom: 201px;
}
#left {
left: 0;
width: 484px;
height: 195px;
}
#right {
right: 0;
width: 508px;
height: 196px;
}
One more thing my container contains all the divs
Someone please help
Something similar to this - JSFiddle ?
HTML:
<div class="row">
<div class="col1">One</div>
<div class="col2">two</div>
</div>
<div class="row">
<div class="col1">One</div>
<div class="col2">two</div>
</div>
CSS:
.row{ overflow: hidden; margin: 4px; }
.col1, .col2{ float: left; width: 250px; height: 100px; }
.col1{ background: red; }
.col2{ background: green; }