CODEWITHSUNDEEP
csshtmlcss-position
user1493448
user1493448

Reputation: 341

how to set absolute position div

I have a absolute position div that I set on the below of another div. When I maximize or minimize browser press ctrl +/- then my absolute position div don’t stay his original position. Please can someone point out what I may be doing wrong here? Many thanks. Here is my code:

<html>
    <head>
        <title>Test Page</title>
        <style type="text/css">
            body
            {
                margin: 0px;
                padding: 0px;
            }
            #header
            {
                width: 980px;
                height:80px;
                background: #006666;
                margin: 0 auto;
            }

            #content
            {
                color: white;
                padding-top: 30px;
                margin-left: 200px;
            }

            #menu
            {
                position: absolute;
                top:50px;
                left:222px;
                width: 100px;
                height: 20px;
                background: red;
            }                
    </style>
    </head>
    <body>
        <div id="header">
            <div id="content">Uttara.hr</div>
            <div id="menu"></div>
        </div>
    </body>
</html>

Upvotes: 1

Views: 13721

Answers (3)

Hussain Akhtar Wahid &#39;Ghouri&#39;
Hussain Akhtar Wahid &#39;Ghouri&#39;

Reputation: 6617

Select css for your out-most div and set its position relative, then set all the positions for all your divs.

For your out-most div:

style="position: relative;"

Upvotes: 0

Scott Selby
Scott Selby

Reputation: 9570

you have to set #header to either absolute or relative positioning to keep the contents of its children inside it.

or you can make both #content and #menu positioned absolute, then they'll move around together as the screen adjusts

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157324

I guess what you need is the red div below your text, so you need to give position: relative; to the parent div so that absolute positioned div doesn't flow out in the wild

Demo

(Note: you can now adjust the div the way you want)

CSS

#header {
    width: 980px;
    height:80px;
    background: #006666;
    margin: 0 auto;
    position: relative; <---------Here
}

Upvotes: 1

Related Questions