Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>CSS Test</title> <style type="text/css">.imageposition{ position:absolute; left:50px; top:50px; right:50px; bottom:50px; z-index:1; width: 55px; height: 55px;}.textposition{position:absolute;left:65px;top:92px;right:50px;bottom:50px;z-index:2;background-color:#FF9966;width:177px;height:33px;}</style> </head><body> <img src="img07.gif" alt="" width="155" height="131" class="imageposition" /><div class="textposition">This is a test text, to see if the css code is correct</div> <div></div></body></html> BUT when the browser window is resized to the minimum amount, the layout gets stuck and has "no air" between the content. Meaning the content is not correctly centered.
So this is wrong:

And that'd be the right spacing:

