CODEWITHSUNDEEP
css
Michael St Clair
Michael St Clair

Reputation: 6635

Absolute Position Element Within Centered Div

I have a div that is centered using auto margins. It is 900px wide. I have a login button that I want to position above it, I can't figure out how to do the left and right so it stays in a constant place relative to the div. I want it just inside the right edge of the div.

Upvotes: 0

Views: 81

Answers (3)

hriziya
hriziya

Reputation: 1172

        $.fn.makeAbsolute = function (rebase) {

        return this.each(function () {

            var el = $(this);

            var pos = el.position();

            el.css({
                position: "absolute"
                , marginLeft: 0
                , marginTop: 0
                , top: pos.top
                , left: pos.left
                , zIndex: 1
            });

            if (rebase)

                el.remove().appendTo("body");

        });

    }

You can use jQuery("#myDiv").makeAbsolute();

Is this what you are looking for ?

Upvotes: 0

theaceofthespade
theaceofthespade

Reputation: 456

A simple answer would be to wrap both inside of an invisible container div with a width of 900px, and then to center that div with auto-margins.

so it would be

<div class="container">
     <input type="submit" value="login">
     <div class="innerDiv">
     </div>
</div>

With the style

div.container{
     width:900px;
     margin:0 auto;
}

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

First set up your centered div with position relative

#centered-div{position: relative; width: 900px; margin: auto;}

Then set up your login button with position absolute

#login{position: absolute; left: 0; top: 50px;}

Upvotes: 1

Related Questions