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"
Related
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>
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/
Here is the JSFiddle: http://jsfiddle.net/W2UvH/1/
Very simple implementation of a sticky footer that should stick to the bottom of the screen when there is less content height than the height of the screen. But if the height of the content extends beyond the height of the screen, then the footer should follow along with it.
I don't understand why my footer is stopping half way up the screen.
HTML:
<div id="Canvas">
<div id="Container">
<div id="Wrapper">
</div>
</div>
</div>
<div id="SiteFooter">
<p>Copyright © All Rights Reserved.</p>
</div>
CSS:
body, html {
height: 100%;
}
#Canvas {
position: relative;
min-height: 100%;
}
#Container {
margin: auto;
background-color: #CCC;
max-width: 802px;
padding: 15px 0;
}
#Wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 730px;
background-color: #999;
border: 1px solid #DEDEDE;
overflow: hidden;
height: 1000px;
}
#SiteFooter {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9000;
background-color: #FF00FF;
height: 45px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #E0E0E0;
}
I see that all your other elements are positions relative. So, not sure what your exact implementation is, but:
#SiteFooter {
position: relative;
}
The above code should also do it for you.
You want the position to be fixed, not absolute.
#SiteFooter {
position: fixed;
}
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; }
How do I position an element absolutely from the top, but relatively from the sides.
I.e., the object needs to be Xpx. from the top (absolute) and stay centered from the sides.
I tried the following CSS, but it was not working.
position: absolute; top: 105px;
margin: 0 auto;
Thank you.
I would place it inside a container that had absolute positioning, and then make it's postition relative to that.
#container { position: absolute; top: 105px; }
#box { position: relative; margin: auto; }
Then just:
<div id="container">
<div id="box">
</div>
</div>
This is just off the top of my head.
Live Demo
<style type="text/css">
div { padding: 5px; }
#outer {
border: 1px dotted #F00;
position: absolute;
top: 105px;
right: 0px;
left: 0px;
}
#inner {
border: 1px dotted #0F0;
margin: 0 auto;
text-align: center;
width: 200px;
}
</style>
<div id="outer">
<div id="inner">Banner</div>
</div>
If it has a known, fixed width, set the margin-left to negative half the overall width:
#banner { position:absolute; width:400px; left:50%; margin-left:-200px }