CODEWITHSUNDEEP
csshtmlresize
Ryan Duffing
Ryan Duffing

Reputation: 674

Prevent div block from moving when window resized

I have a div block that overlays on top of its parent div, but when the window is resized, the child div moves around like crazy. How can I prevent that from happening. Here is the link to my site: http://raider.grcc.edu/~ryanduffing/recordstore/

Here is the relevant CSS code, and HTML code:

            <div id="overlayDescription" class="my_corner">
                <span id="overHeader"><span id="chevron">&#187;</span>THE CORNER</span>
                <span id="overHeader2">RECORD SHOP</span>
                <p id="overContent"></p>
            </div>
            <div id="pictureBox">
                <img src="img/storefront.jpg" />
            </div>

#pictureBox{
    margin-top: 10px;
    margin-left:auto;
    margin-right:auto;
    width: 940px;
    height: 420px;
    position: relative;
    z-index: 1;
}

#overlayDescription{
    font-size: 11px;
     position:absolute;
    top: 290px;
    right: 489px;
    height: 265px;
    border: 1px solid #FFFFFF;
    width: 240px;
    color: #FFFFFF;
    background-color:rgba(0,0,0,.9);
    z-index: 2;
    border-radius: 100px 0 0 0;
}

#overlayDescription span#overHeader{
    font-family: Arial Narrow;
    position:relative;
    font-size: 25px;
    left: 80px;
    top: 10px;
}

#overlayDescription span#chevron{
    position:relative;
    left: -5px;
    font-family: Arial Narrow;
    font-size: 35px;
    color: yellow;
}

#overlayDescription span#overHeader2{
    font-family: Arial Narrow;
    color: yellow;
    position:relative;
    top: 10px;
    left: 80px;
    font-size: 25px;
}

#overlayDescription p#overContent{
    position:absolute;
    padding-left: 25px;
}

Upvotes: 1

Views: 17675

Answers (3)

Eli
Eli

Reputation: 14827

It's because you give your child div absolute position means that this element is positioned relative to the first parent element that has a position other than static.

But as I can see from your website, all parent divs of your #overlayDescription div are static positioned element since static is the default position value.

So currently, your div are positioned according to your html element which is your window so you need to give one of its parent another position method rather then static then you'll be fine, for example:

#content {
    position: absolute;
}

Upvotes: 1

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

Set position: relative; on div.content.

Then set right: 0px; on #overlayDescription and adjust the top value to get it to sit in the right spot vertically.

Upvotes: 0

Arbel
Arbel

Reputation: 30999

You have to make the child's absolute position relative to its parent.

#content {
    position: relative;
}

#overlayDescription {
    top: 140px;
    right: 327px;
    /* rest of the styles for this element */
}

Upvotes: 1

Related Questions