Show\hide Div positioning breaks when page resized

Question

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.

<!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="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="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="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="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="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="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>

score 1 · Answer 1 · edited May 23 '17 at 12:28

usually adding margin:auto to an element can work, but with position it probably won't.

Your best bet is using JavaScript (even jQuery) to get the screen height and width. You will also need to probably check and get the screen dimensions again on resize.

Here's a good post to get you started: Using jQuery to center a DIV on the screen

If you DONT want to use JS...

try something like this:http://jsfiddle.net/RbFnm/10/

#box{margin: auto; background: #000; position: relative; z-index: 1; width: 300px; height: 300px;}
#subbox{background: #ccc; position: absolute; width: 50px; height: 50px; z-index: 3; top: 10px; left: 10px;}
#special{background: #ccc; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; z-index: 5;}

along with tips for vertical alignment from: http://phrogz.net/css/vertical-align/

Thank you for a quick reply. Before delving into js could you or anyone resolve this in css only? — Hanna, Mar 27 '13 at 02:06
I updated my answer with a CSS option for you to try with an example and source. Hope this helps. — Sarah L., Mar 28 '13 at 15:25

Show\hide Div positioning breaks when page resized

1 Answers1