CODEWITHSUNDEEP
htmlcss
daniel aagentah
daniel aagentah

Reputation: 1702

CSS - Center Main Div of Webpage

I am trying to use CSS to center my main div on the webpage (two), so that a white border will fall on either side of it all the time.

I have tried many types of Position and Aligning CSS syntax to try and do this, yet my "two" div always seems to snap to the right of the page. here is the code I am using:

<style type="text/css">
    .one {
        text-align: center;
        width: 100%;
        min-width: 640Px;
        background-color: white;
    }

    .two {
        width: 80%;
        background-color: darkkhaki;
        float: none;
    }
</style>


<form runat="server">
    <div class="one">
        <div class="two">
            Test
        </div>
    </div>
</form>

I want to be able to have the (two) div centered at 80% of my page no matter what, is there anything I am missing?

any help or advance is appreciated. thank you in advance.

Upvotes: 1

Views: 604

Answers (1)

A.Sharma
A.Sharma

Reputation: 2799

Add margin:0 auto; to your two element.

See a fiddle: https://jsfiddle.net/7pxps35z/1/

Upvotes: 3

Related Questions