first post and a noob.I am learning html\css and usually solve most problems with a bit of searching on here. I can't seem to get my head around the problem with the page below. Basically I want several images in a circle around a div which holds hidden text. When I hover(or maybe later click) on a image, the associated text should show - then hide\change when the next image is hovered over (think people and profiles)So far the page does what I want - at full screen. When I make the browser window smaller, the text stays put and all other elements move. I know I have position:fixed on image .hover and this is the problem. But it breaks if I change :fixed to any other value?I have read lots of answers on here, I have spent hours trying to figure it out but have failed and am now frustated by my failure to solve something which I'm sure is a very simple problem. All I want is the div holding the text to be central to the circle of images whenever the browser window is resized. What do I need to change in this code to achieve this? Is there a better way to do what I want?I hope you understand my frustrations and dont give me too hard a time 
I have never had a problem with positioning before - until trying to show\hide a div.\[code\]<!DOCTYPE html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>Untitled</title><style>#image { position:relative; width:180px; height:140px;}#image .hover { display:none ; position:fixed;}#image:hover .hover { display:block;}#wrapper{ width:960px; margin :0px auto ; text-align: center ;}#banner{ height:250px;}#content{}</style></head><body><div id="wrapper"> <div id="banner"></div> <div id="content"> <div id="image" style="left: 383px; top: 31px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px"> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div> <div id="image" style="left: 97px; top: -83px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px"> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div> <div id="image" style="left: 652px; top: -272px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px"> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div> <div id="image" style="left: 91px; top: 50px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px"> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div> <div id="image" style="left: 370px; top: -80px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top:480px; width: 388px; height: 440px"> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div> <div id="image" style="left: 650px; top: -318px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top: 480px;width: 388px; height: 440px"> <p>Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div></div></div></body></html>\[/code\]
I have never had a problem with positioning before - until trying to show\hide a div.\[code\]<!DOCTYPE html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>Untitled</title><style>#image { position:relative; width:180px; height:140px;}#image .hover { display:none ; position:fixed;}#image:hover .hover { display:block;}#wrapper{ width:960px; margin :0px auto ; text-align: center ;}#banner{ height:250px;}#content{}</style></head><body><div id="wrapper"> <div id="banner"></div> <div id="content"> <div id="image" style="left: 383px; top: 31px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px"> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div> <div id="image" style="left: 97px; top: -83px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px"> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div> <div id="image" style="left: 652px; top: -272px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px"> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div> <div id="image" style="left: 91px; top: 50px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px"> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div> <div id="image" style="left: 370px; top: -80px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top:480px; width: 388px; height: 440px"> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div> <div id="image" style="left: 650px; top: -318px; width: 135px; height: 192px;"> <img src="http://stackoverflow.com/questions/15646290/images/img-placeholder.jpg" alt="" height="176" width="127"/> <div class="hover" style="left: 440px; top: 480px;width: 388px; height: 440px"> <p>Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> <p>Eight Lines of text here Eight Lines of text here</p> </div> </div></div></div></body></html>\[/code\]