I have created a few divs inside divs:). The problem is that the FOOTER div is printed above the div which contains absolute divs and is not dipalyed as last (at the bottom).
I tried a few combinations for footer div like: "position: absolute; top: 0px; left:0px", but it still displyed at the top of page.
How to move it to the bottom with current divs?
http://jsfiddle.net/hsbgpmus/2/
Where is the problem?
ADDED:
I want to have footer div not at the bottom of web browser window, but as last div right after div containing BBBB string.
You have used "position:static" in your example fiddle. Static means the element will flow into the page as it normally would.
For more info. about positioning element using css refer this link.
Positioning element absolutely and setting top and left to 0px means you want to align it at the top. To align element at the bottom of the parent element, you have to set bottom property (not top property)
CSS code :
<footer_element_class_or_id> {
position: absolute;
bottom: 0px;
left: 0px;
}
Hope it helps.
try this
<div style="position:relative; height:600px">
<div style="width: 100px">
<h1>HEaDER</h1>
<div>
<div style="position: static">
<div style="padding: 10px; position: absolute; top: 100px; left: 100px; background-color: yellow;">aaaaa</div>
<div style="padding: 10px; position: absolute; top: 200px; background-color: yellow;">cccc</div>
<div style="padding: 10px; position: absolute; top: 300px; background-color: yellow;">bbbb</div>
</div>
<div style="position: absolute; bottom:0">
<h1>FOOTER</h1>
</DIV>
</div>
http://jsfiddle.net/anjum121/xmox7pjq/
you need to wrapp your parent div to relative position
try this fiddle
http://jsfiddle.net/hsbgpmus/3/
.footer{
position:absolute;
bottom:0;
}
html
<div class ="footer"><h1>FOOTER</h1></DIV>
use below code for footer,
position: absolute; bottom: 0px; left:0px
Related
I am trying to make a div fixed on the top but looks like the layer overlaps.
CSS:
#fsancy {
background-color:#ddd;
position: fixed;
display: block;
width: 200px;
height: 100px;
left: 50%;
top: 0%;
margin-left: -100px; /*half the width*/
}
HTML:
<div class="container" id="fsancy">
<div class="row">
<div class="col-lg-12 text-center fluid fixme" id=""
style="background-color: #ff0033; max-width: 100%; color: #ffffff; font-size: xx-large">Share £200 With A
Friend
</div>
</div>
Picture example
Fixed position elements are not part of the regular document flow, so in your particular case you have to add some margin-top to the first regular element which is high enough to avoid the overlap / fit under the fixed header.
#Michelbach Alin, use position absolute and z-index properties for fix as a layer.
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Reference.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Basically, I've been trying all sorts of positioning and what not, but here's the issue:
given one div that is shaped like a rectangle, I am trying to overlay another div on it that will be 50% of the width. However, if I do this then the div below also changes its shape/positioning.
How can I prevent htis from happening?
I know how to make containers, but the inside content is bound by the outer content.
In this case, I want to put a smaller div on top of a larger dive without messing up the div below.
<div class="overlay">
<div class="image">
</div>
</div>
What if you contain them in another div?
Something like this:
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
height: 300px;
width: 250px;
position: relative;
}
div.overlay {
position: absolute;
border: 3px solid #73AD21;
left: 0px;
top: 0px;
width: 50%;
bottom: 0px;
display:block;
}
div.image {
position: absolute;
top: 0px;
width: 200%;
height: 100%;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="container">
<div class="overlay">This div element has position: relative;
<div class="image">This div element has position: absolute;</div>
</div>
</div>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=FE87FF3WRXHF
Please checkout this fiddle, if I understand you correctly
you can either use
float:left
https://jsfiddle.net/wuvxuddk/
to take the div out of the normal flow or use
position: absolute
https://jsfiddle.net/tygpoxuk/
Using the CSS property 'position', how would it be possible to make a div inside another div always 100% height of the parent div, with a margin of 40px on the top and on the bottom? It needs to be adjusting, so that if the parent div is 700px in height, the child div will be 620px (700px - 80px from margins). Here is an example of what I mean:
Here the parent div (green) is tall, so the child (orange) must stretch to fit the space.
And here the parent (green) is squashed, so the child (orange) must compensate by squashing itself to fit.
Thank you in advance.
Edit:
Here is the html Im working with:
<div id="center-page">
<p id="center-page-title">Blog</h1>
<div id="content">
</div>
</div>
Try this:
#center-page {
position: relative;
background: green;
height: 700px;
}
#content {
position: absolute;
background: orange;
top: 40px;
bottom: 40px;
left: 0;
right: 0;
}
<div id="center-page">
<p id="center-page-title">Blog</h1>
<div id="content">
</div>
</div>
You can try absolute positioning with top and bottom values. Something like this:
#child{
position: absolute;
top: 40px;
bottom: 40px;
left: 0;
right: 0;
background: blue;
}
Here is an example:
https://jsfiddle.net/Lys72mgy/
I have some divs at my HTML and one of them is loading image div so I want it overlap its parent div. Here is my code:
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2"></div>
</div>
</div>
When I use different positions (i.e. absolute, relative etc.) child div couldn't overlap its parent. Here is my fiddle link: http://jsfiddle.net/yNFxj/4/ I don't want to see anything from parent div but I want to see that child div increased as parent's size and overlapped it.
Any ideas about how can I dot it just with pure html and css and with a generic way to implement it my any other pages?
PS: Border, width, height etc. are just for example, it can be removed.
Sajjan's the closest from what I can tell, but his has a few flaws:
Position: absolute requires its parent to have a non-static position (this is often done with position: relative, which effectively works the same way as static).
You don't need to set the height and width of the child, just the parent.
Here's my Fiddle for it to demonstrate.
#parent {
border: 5px solid gray;
position: relative;
height: 100px;
width: 100px;
margin-left: 50px;
}
#child {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background: red;
}
The key here is the position: relative on the parent.
I am curious, though, what exactly you're trying to achieve with this. I have a feeling that whatever it is, there's a better way.
Why doesnt this work for you? If i understand you right, you just want to mask the parent DIV with the child DIV?
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2;top:0;left:0;width:200px; height:250px;"></div>
</div>
</div>
Output on chrome:
To make it generic, get the parents position/dimension using offsetTop/Left/Height/Width methods and set the child's dimensions/position using these, im sure there are plenty of posts on SO that do this..
First problem is that absolute positioned elements refers to the first parent element with a position different from static.
This means that if no parents have fixed, relative, or absolute position, it will refer to the body, that is not what you want in this case.
Then put position: relative; to your parent div.
Second problem: with absolute position, you can stop using width and height and start using top, left, bottom and right properties;
Setting all them to 0 means extends the object to the parent boundaries.
But here you want to overlap them, then... simply, use a negative value equals to the size of the parent borders: 15px;
top: -15px;
left: -15px;
bottom: -15px;
right: -15px;
Demo: http://jsfiddle.net/yNFxj/9/
I've used dashed borders so you can see the underneath parent's borders ;)
Try this:
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;position:relative; width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2; width:200px; height:250px; left:-15px; top:-15px"></div>
</div>
</div>
update a fiddle for you http://jsfiddle.net/yNFxj/16/
HTML
<div id="something1">
<div id="something2"></div>
<div id="parent">
<div id="child"></div>
</div>
</div>
CSS
#parent {
width: 100px;
height: 300px;
background-color: #a0a0a0;
width:200px;
height:250px;
position: relative;
}
#child {
width: inherit;
height: inherit;
position: absolute;
background-color: #a2f2e2;
top: 0px;
left: 0px;
}
Works fine
EDIT: added with and height inherit for you & positioned properly
I have tried many things but I still haven't found a decent solution.
Whilst desiging a webpage, I'm using this lay-out (lay-out using different full length colored stripes in the background as sections):
<body>
<div id="wrap_banner" class="bg_banner">
<div id="wrapcentering_banner">
<p>Here comes banner</p>
</div>
</div>
<div id="wrap_middle" class="bg_middle">
<div id="wrapcentering_middle">
<p>text</p>
</div>
</div>
<div id="wrap_footer" class="bg_footer">
<div id="wrapcentering_footer">
<table width="879" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text_webmade">
<p>
Company</p></td>
</tr>
</table>
</div>
</div>
</body>
CSS contains following:
#wrap_banner, #wrap_middle, #wrap_footer {
position: relative;
height: auto;
}
#wrapcentering_footer {
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
height: 100%;
top: 0px;
}
#wrapcentering_middle{
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
height: auto;
top: 0px;
}
#wrapcentering_banner {
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
height: 200px;
top: 0px;
}
.bg_middle, .bg_footer, .bg_banner {
width: 100%;
position: relative;
background-color:#FFF
}
PROBLEM:
Any div I'm putting in the wrapcentering_banner containing an automatic height is NOT pushing the footer div down. Depending on the Z-index, it's putting the content either behind the footer div er on top of the footer div, but it never pushes the div's.
I tried to put some relative divs in one container div ( inside the wrapcentering div ) using automatic heights and float lefts, but still nothing is pushing the divs down. Offcourse absolute divs are not working either.
The only solution I have to get the content shown is giving the wrapcentering div a specific height and making sure the contents is made for that height. Or I have to use a table in wrapcentering div. Tables pushes the footer divs down.
Since I'm not a big fan of tables, is there a way to push these divs down?
Thanks.
You can try giving automatic heights and floats to the wrapcentering_banner div and clearing the float for the footer div. This will make sure the footer div does not float along with the upper divs and will position it below the other divs.