Technology TidBits

Answers to various technical questions on php programming, mysql, linux, and many more categories.
25% off Hosting at HostGator.com:
Use Code techbits25



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:

<div id=callme style="position:absolute; top:3px;">

This was testing in MSIE 7, and Google Chrome. 

 

blog comments powered by Disqus
Have your own Tech-bit to contribute? Submit it here

Other questions in this category:
How do I set up a meta-refresh in html?
How can I open a new window using Javascript?
How can I slash out a price to denote a sale price in html and php?
How do I force a page break for printable html documents?
How can I manipulate table borders in CSS and html?
How can I disable the right mouse button on my HTML pages? (to discourage copying of images)
How do I password protect a directory on my website?
Why do my web forms lose data when I hit the back button?
I'm seeing funny characters or boxes on my website after upgrading / moving to a new server. How do I fix it?
What order must I specify link styles in my css?
Configuring htmleditor to do file uploads using php
How can I get my article text to wrap-around an image on the page
How can I make a vertical divider (like a horizontal rule) ?
How can I make a nicer border for my html tables
How can I set up a proper 301 redirect with an htaccess file?
How can I get a "hint" to pop up when I mouseover a link on my site?
How can I remove indents from my <ul> lists in css?
Why do I have mce_serialized="1" showing on my website?
How do I enable SSI (Server Side Includes) on IIS 7.x (1&1 dedicated sever) ?
IE 7 gives me an "Unknown runtime error" when using ajax - how can I fix this?
How can I set up css styles so they are easy to remember when I'm coding?
How can I add a nice rounded edge box around some text?
How can I make a rounded button using just CSS?



Powered by KnowledgebasePublisher 1.1
Host Gator
Content provided by Roberts WebForge, Inc.