Jump to content

Locking down "position: absolute;" items


sfdower
 Share

Recommended Posts

How do you cause an item, positioned via a position:absolute, to not reformat when the browser window is shrunk? Using an example from W3Schools: <!DOCTYPE html><html><head><style type="text/css">h2{position:absolute;left:100px;top:150px;}</style></head><body><h2>This is a heading with an absolute position</h2><p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p></body></html> The H2 string goes from occupying 1 line on the web page to multiple lines if the window is shrunk smaller than the size that the text would normally occupy in 1 line. Additional info: Occurs with IE and FF. Thanks in advance for any suggestions.

Link to comment
Share on other sites

Put it in a div. Text shouldn't be floating like that. Then that div needs position relative.

<!DOCTYPE html><html><head><style type="text/css">h2{position:absolute;left:100px;top:150px;}.content{position:relative:width:500px;</style></head><body><div class="content"><h2>This is a heading with an absolute position</h2><p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...