CODEWITHSUNDEEP
htmlcenter
marky
marky

Reputation: 5068

Center div in page

I know this has been asked a thousand (million?) times, but for the life of me I can't figure out why I can't get a div to center on my page. Even with the HTML and CSS stripped down to the bare minimum.

I'd appreciate it if someone could point out what I'm missing here.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <style type="text/css">
            div#branchSelect { margin: 0 auto; }
        </style>
    </head>
    <body>
        <div id="branchSelect">
            <h4 class="selectBranch">Select a Branch to View</h4>
            <select type="select" id="ddlBranches" class="selectBranch">
                <option id="defaultBranchesListItem" value="0">Select a branch...</option>
                <option value="1">Atlanta</option>
            </select>
        </div>
    </body>
</html>

Here's a jsFiddle.

Upvotes: 0

Views: 8788

Answers (2)

A J
A J

Reputation: 2140

Your div lacks a width property and so by default its with is 100%, so no matter what you do it gets streatched all the way accross the screen, so just assing a width property to your div and then set the margin as "0 auto" in style as shown by Marcus Recck

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

Upvotes: 0

Marcus Recck
Marcus Recck

Reputation: 5065

divs are automatically set to 100% width.

Just set the width of the div and use the margin: 0 auto; to center it on the page.

div#branchSelect {
    width:300px;
    margin:0 auto;
}

Upvotes: 6

Related Questions