I want to put a div Element constantly on the bottom of his parant div.
This should work with
position:relative;
bottom:0px;
Anyway it doesnt, the only think i can to is to margin top until it fits, but i dont like that. Can you find a reason in my code why the rlative position wont work?
#charset "utf-8";
/* CSS Document */
body {
background-color:#999;
}
#wrapper {
height:40em;
max-height:45em;
min-height:40em;
width:80%;
max-width:60em;
min-width:30em;
margin-left:auto;
margin-right:auto;
background-color:#333;
border:#000 solid;
border-width:thin;
}
#header {
width:100%;
height:70px;
background-color:#009900;
border-bot:#000 solid;
border-width:thin;
}
#content {
position:relative;
bottom:0px;
top:auto;
width:100%;
height:30em;
background-color:#FFFFFF;
border-top:#000 solid;
border-width:thin;
}
Content and Header are both parents of wrapper. So i want to put content on the bottom of wrapper.
Set the position #wrapper to relative, then set #content's position to absolute and bottom to zero.
the parent element should have a position:relative and the one sticking to the bottom
position:absolute;
bottom:0px;
hope this helps.
Related
I have a div with an absolute positioning which is again a child of absolute positioned element. setting width:100%;left:1px;right:1px to the child not working. Problem i face is, its getting beyond the parent the element.
<div class="outer">
<div class="inner">
</div>
</div>
.outer{
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
}
.inner{
position:absolute;
width:100%;
height:100%;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
Refer here
Just take away the 100% on the child element and the inner div will fit the parent.
.outer{
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
}
.inner{
position:absolute;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
This is because you have the width and height to be 100%, meaning it'll be also 80px PLUS the top left right and bottom properties so the box lays over the other. Now if you want it to go inside the box and be perfectly proportioned remove height and width:
.inner{
position:absolute;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
You can also make this:
.outer{
margin-top: 10px;
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
padding: 1px;
}
.inner{
position:relative;
width:100%;
height:100%;
background:red;
}
I'm currently playing around with HTML and using position to align my div content.
At the moment, I have 3 divs. 2 divs using position:fixed and the other using position:relative.
My two fixed divs span the width of the page at 100% and are aligned at the top of the webpage. Like a top bar.
My third div is placed underneath the top bar with position:relative. The problem i'm having is that the third div is not being positioned underneath the two fixed divs (see picture)
Here is my code:
.topbar-container {
position:fixed;
width:100%;
height:72px;
background-color:#ffffff;
border-bottom:1px solid #e0e0e0;
z-index:2;
top:0;
}
.topbar {
position:fixed;
width:1200px;
height:72px;
left:50%;
margin-left:-600px;
top:0;
}
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
}
My HTML:
<div class="topbar-container">
<div class="topbar">
</div>
</div>
<div class="body-container">
</div>
As you can tell by the picture, the div with the red border is being pushed up to the top of the page, where i thought by using position:relative would have fixed the problem.
Could someone please take a look for me?
Thanks in advance
http://www.dumpt.com/img/viewer.php?file=d96p2ywgzqs5bmnkac7q.png
Setting position: fixed or position: absolute will remove the element from the page flow. You now need to explicitly set the top property for .body-container to make it appear under the .topbar-container:
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
top: 72px; /* must be >= the height of .topbar-container */
}
I have a #slider div with an image. After that, I have a #content div which has text. I have tried position:relative so I think it should come after the previous div, I mean #slider but here it is not coming that way.
What is the problem here? How to overcome it?
HTML
<div id="slider">
<img src="http://oi43.tinypic.com/25k319l.jpg"/>
</div>
<div id="content">
<div id="text">
sample text
</div>
</div>
CSS
#slider {
position:absolute;
left:0;
height:400px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}
JSFIDDLE
You have set #slider as absolute, which means that it "is positioned relative to the nearest positioned ancestor" (confusing, right?). Meanwhile, #content div is placed relative, which means "relative to its normal position". So the position of the 2 divs is not related.
You can read about CSS positioning here
If you set both to relative, the divs will be one after the other, as shown here:
#slider {
position:relative;
left:0;
height:400px;
border-style:solid;
border-width:5px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}
http://jsfiddle.net/uorgj4e1/
what about changing the position: relative on your #content #text div to position: absolute
#content #text {
position:absolute;
width:950px;
height:215px;
color:red;
}
http://jsfiddle.net/CaZY7/12/
then you can use the css properties left and top to position within the #content div
I have this code.
Wish div align blue with red div without affecting the rest of the page.
Notice that the div#leftcontent not go to the bottom of the page and I'm not understanding why.
Maybe the solution is to put the div#leftcontent aligned to the bottom of the page. But how?
Thanks.
you have to change the red div:
bottom: 0px; /*delete*/
position:relative;
maring-top: 86px; /*to align to the blue*/
check this out: http://jsfiddle.net/85unG/48/
and for the height, the reason the its not touching the bottom is:
div#wrap {
height: 768px; /should be 739 px;/
}
CSS absolute positioning to the rescue!
First ditch the fixed height and the overflow:auto for div#wrap. Replace overflow:auto with overflow:hidden:
div#wrap
{
width:1024px;
/*height:768px; /* Forget about it! */
margin:5px auto;
border:2px solid #ccc;
/*overflow:auto;/* Forget about it! */ overflow:hidden;
position:relative;
}
... now note that div#wrap has a relative position:
div#wrap
{
width:1024px;
margin:5px auto;
border:2px solid #ccc;
overflow:hidden;
position:relative; /* AWESOME */
}
This means div#wrap is non-statically positioned, so we can position things absolutely within it... like div#footer and div#social-networks:
div#wrap div#leftcontent div#footer {
position:absolute;
bottom:0px;
}
div#wrap div#nav div#social-networks {
position:absolute;
bottom:0px;
}
This will position the bottom edge of div#footer and div#social-networks 0px away from the bottom edge of its non-statically positioned ancestor - namely, div#wrap.
Bad news though: positioning things absolutely can screw up the natural flow of things, so you have to manually reserve some space for div#footer and div#social-networks. Do this with padding:
div#wrap
{
width:1024px;
margin:5px auto;
border:2px solid #ccc;
overflow:hidden;
position:relative;
padding-bottom:50px; /* this is new... you can choose a better number than 50px */
}
I want to position one div over another div.
CSS:
.fresh_bnr_img {
float:left;
width:950px;
text-align:center;
}
.black_strip1 {
position:relative;
top:20px;
width:120px;
height:50px;
background:#000;
opacity:0.5;
z-index:999;
}
HTML:
<div class="fresh_bnr_img">
<div class="black_strip1">Home</div>
<img src="images/banner-2.jpg" width="946" height="295" alt="fresh-banner" />
</div>
The problem is that when I place the black_strip1 class on the inner div, it appears in the right place but a blank space is appearing before the next div.
give the containing div position:relative; and the child div position:absolute;
the child div will now be positioned with respect to the parent div. (starting from the top left of the parent div)
eg.
.fresh_bnr_img{
position:relative;
float:left;
width:950px;
text-align:center;
}
.black_strip1{
position:absolute;
top:20px; /* 20px from the top edge of .fresh_bnr_img*/
left:0px; /* 0px from the left edge of .fresh_bnr_img*/
width:120px;
height:50px;
background:#000;
opacity:0.5;
z-index:999;
}
I hope it will help you
http://www.templatespoint.com/blog/2010/10/how-to-do-div-on-div/