Home / Programming / HTML - CSS / How can I position a <div> element for differing screen resolutions and widths?
How can I position a <div> element for differing screen resolutions and widths?
Last updated: 02/07/2012
A problem I've run into several times now is to position an element in a certain spot on a website that's "centered" in the browser. This is usually when the client requests a new image or content be "stuck" at a specific spot on the page. Rather than rip apart the design to accomodate the new element, I try creating a <div> element, putting it at the bottom of the page, and then absolutely positioning it.
This works, unless of course, the website is centered - then depending on the screen width, absolute positioning bombs out - the element ends up overlapping other images, or content.
My solution is to try this - just position the element using the "top" and not the "left" attributes. This seems to cause the browser to leave the element where it is horizontally, but moves it vertically based on the top of the page (the top doesn't usually change from 0). If you follow this so far, here's a sample div using this method: