CODEWITHSUNDEEP
cssxhtml
Shadi Almosri
Shadi Almosri

Reputation: 11989

Center Div inside another (100% width) div

Quite a "simple" problem here and not sure why it's being so complicated.

  1. Have a 100% (width) sized div.
  2. Have another div positioned in the middle of this div (sized 940px width)

Any ideas? :)

Upvotes: 42

Views: 138788

Answers (6)

ScottE
ScottE

Reputation: 21630

Just add margin: 0 auto; to the inside div.

Upvotes: 4

DeFliGra
DeFliGra

Reputation: 61

.outerdiv {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

Doesn't work in internet explorer 7... but who cares ?

Upvotes: 5

Khashayar
Khashayar

Reputation: 1351

for detail info, let's say the code below will make a div aligned center:

margin-left: auto;
margin-right: auto;

or simply use:

margin: 0 auto;

but bear in mind, the above CSS code only works when you specify a fixed width (not 100%) on your html element. so the complete solution for your issue would be:

.your-inner-div {
      margin: 0 auto;
      width: 900px;
}

Upvotes: 21

geowa4
geowa4

Reputation: 41853

.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }

Upvotes: 60

Larsenal
Larsenal

Reputation: 51196

The key is the margin: 0 auto; on the inner div. A proof-of-concept example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
    <div style="background-color: blue; width: 100%;">
        <div style="background-color: yellow; width: 940px; margin: 0 auto;">
            Test
        </div>
    </div>
</body>
</html>

Upvotes: 6

Virat Kadaru
Virat Kadaru

Reputation: 2256

The below style to the inner div will center it.

margin: 0 auto;

Upvotes: 32

Related Questions