I have a div that I wish to position at the bottom of the webpage. I can achieve this using position:absolute. However, I don't want it to overlap the div above when the window is made smaller. This was achieved by changing it to position:relative however as expected it does not stay on the bottom of the page on bigger screens.
Is there a way in which this is possible?
Current CSS
position:relative;
bottom:0;
background-image:url('.......');
background-repeat:repeat-x;
background-position:bottom;
width:100%;
An example of what I was explaining.
As for me, the best idea is through creating a container DIV for all page content (stretch it to fit all screen using popular practices). Then you can put your footer to the bottom of this container by setting position: absolute and bottom: 0, and don't forget to set padding-bottom: height of your footer to the container. This will prevent overlapping your footer by content of the page.
Try giving min-height to DIV above footer DIV.
When the window becomes smaller, use media queries for that particular resolution or a resolution lesser than that and apply a display:none; to that div with the class that has a position absolute, if you do not want it to display or z-index:0; or z-index:-1; if you want to show it below the contents div.
Hope this helps.
You could set a margin-bottom of the height of the absolute element on the upper div. This way, your absolute positioned element will overflow with the margin instead of the element itself.
The way I see it, you should revert back to position: absolute, then try giving it a low z-index value, such as z-index: -1
Related
I noticed a behavior that drives me crazy.
I have two divs, that have both similar css:
.one, .two {
position: fixed;
bottom: 6%
}
One div is for navigation, and other is for content, that has max 300px height. The problem is, that if the user resizes the browser window to really small one, the scrollbar is not shown.
I tried to change position to absolute, but then the ajaxify plugin breaks the position if new page is loaded. I couldn't find other ideas, how to position those divs at fixed position at bottom.
p.s. I pasted a sample test on http://pastebin.com/Bp1490dj
the background-green div is at the bottom with position:absolute;
from what I know a position:fixed; and or position:absolute; will never make a scroll. (please correct me if I'm wrong) so a way to go arround this is to set a min-height to body
body {
min-height:200px;
}
have a look at the fiddle http://jsfiddle.net/u2ZWa/
also, there is a fix with a scroll now. But you have to know the fixed elements will never be scrollable because they're fixed
Scrollbars are not compatible with a fixed positioning.
I have an image slider which is positioned absolute and has a width of 1280px. The margin-left is -160px to center it in its parent. The parent width is 960px with margin set to '0 auto' to achieve a centered affect.
The image slider should only take up width:960px so that the overflow doesn't cause the browser to handle it with scrollers. Is it possible to achieve something like overflow:hidden while still showing the overflow content at high screen resolutions?
problem example: http://almightyidea.com/test/slider/
basic css:
.slide-wrapper {
position:relative;
width:960px;
margin:0 auto;
}
.slideshow{
position:absolute !important;
margin-left:-160px;
}
I think you should use relative widths for the wrapper. So let it expand wider when the is room to do so. You could also use JavaScript to calculate the width of the viweport for you and set that width to the wrapper.
You could also just use an existing jQuery plugin to do all the heavy lifting. I use Cycle when I need to do stuff like this. http://jquery.malsup.com/cycle/
I need to place a div in certain part of my web page. so i coded as following,
<div style='position:absolute;top:500px;margin-left:300px;width:100px;border:1px solid #000000;height:100px;'></div>
When i checked this page in a 19 inch monitor it is placed where i wanted. but i checked the same page in a 17 inch monitor it is placed 50-70 px more on the left side.
so how should i placed the div in the same place for all screen resolution. This question may seems simple, but i'm not that much familiar to css so any help greatly appreciated. Thanks.
Initially the div had no parent elements, so it is directly under body element. so when i tried to set left:100px, it is counted from leftmost part in the browser.
But i already a had div with 900px with some content and half of the space(vertically) in this div was empty. this is where i wanted to place 100px div.
So i set the 900px position to relative and taken the 100px into 900px div. now this div is positioned "absolute" to the parent element.
Now if i set left:100px to the div its counted from its parent element which is positioned relatively.
The Concept is simple,
Absolute positioning works by using the next available parent container that is positioned (absolutely or relatively)
Have a look at this link it helped to achieve this, absolute postioning
May be you want an absolute position div horizontally center then write like this
CSS:
div{
position:absolute;
top:500px;
margin-left:-50px;
left:50%;
width:100px;
border:1px solid #000000;
height:100px;
}
& you can use media query for different resolution check this http://css-tricks.com/6206-resolution-specific-stylesheets/
I've got a container that's set to a max-width:780px and height is undeclared. Inside the container, there's an image slideshow. Everything on the page is responsive, so as the width decreases, the image (who's width is set to 100%) adjust's the heights container.
The slideshow change's the images to display:static; and position:absolute; which no longer "holds open" the container because it's not seen as content of the container
Is there any creative solution out there to take the height of a child element that's absolutely positioned?
Example below has NO height declared on the main container.. nothing's holding it open.
http://dhut.ch/test/santos/
Thank you!
Are the images all the same dimensions? If yes, you can use a percentage padding-top on the element that contains the images.
So if your images are all, say, 760px wide by 500px tall, that's 500/760 = .65789
Which as percentage would translate into something like:
#main {
position: relative;
max-width: 760px;
padding-top: 65.789%;
}
The reason this works is because with padding if it's set with a percentage, it is calculated as a percentage of the width. As the element shrinks in width, the height will shrink proportionately and the box will remain in the same ratio of width to height. The images, positioned absolutely, won't be adding to the height of the box.
This'll work as long as your images are all the same aspect ratio and you're not expecting that ratio to change. If you'll be using a lot of random images, this isn't for you.
I recently had a similar problem with an image that I needed to absolute position at the top of a Zurb Foundation templated page in order to pull it out of the flow and reset its dimensions (Image had to stretch to edges of wrapper, instead be enclosed by its parent .row padding). However, of course, this meant that all the fluid responsive elements below it popped right up over the top of the image. Setting a margin-top or positioning the sibling elements below meant a rigid top space that didn't resize with the width of the browser.
To get around it, I placed a duplicate of the image right after the absolute positioned image and set its visibility: hidden; I had to add a little bit of extra margin bottom to make up for the difference in height, but the end result is everything on the page flowing exactly to the height of the image in use.
I've also used the padding trick described by unexplainedBacn above, and it's a great trick as well. It takes a little bit of math, but I voted that answer up. Great solution.
I think you'd better change your approach. For sliders, the best practices is to float child elements of the container, and also use one of the known techniques to prevent parent's great collapse. So, I suggest that you remove the position: absolute CSS rule from images and float them inside your <div id='main'>, then use any of these methods to force it to encompass it's children:
div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
Add a <div style='clear: both;'> to the end of your main div container.
Remove the absolute position. I would avoid inline styling as well.
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/