CODEWITHSUNDEEP
htmlcss
jacktheripper
jacktheripper

Reputation: 14219

Centre div inside wrapper with overflow hidden

I wish to centre a wrapper div of fixed width (wrapper) inside another div (body) as you can see below. enter image description here

The line represents the centre of the page/browser window, and as you can see, it both the body and the centre of the wrapper are centred in the middle of the page.

Is there a way to accomplish this using pure CSS and HTML?

Thanks in advance.

Upvotes: 2

Views: 1824

Answers (3)

Mike Legacy
Mike Legacy

Reputation: 1066

I would suggest just using the standard wrapping function which was given above.

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#bodywrapper { width: 600px; margin: 0 auto; }
#wrapper { width: 400px; margin: 0 auto;  }
</style>

</head>
<body>

<div id="bodywrapper">
        .....whatever code you in the body here.
    <div id="wrapper>
          ....whatever you want inside the wrapper that is inside the body here.
    </div>
</div>

</body>
</html>

Basically, you are just nesting a wrapper within a wrapper. There's no reason this can't be done.

Upvotes: 0

Alin P.
Alin P.

Reputation: 44346

Someone bothered to write a short and descriptive How To to this common issue: http://www.wpdfd.com/editorial/thebox/deadcentre4.html

You have two items to position in there, so you'll need apply the technique twice, but you can't really center the body element with this so you'll need to add another container instead of the body.

Have fun!

Upvotes: 1

mildog8
mildog8

Reputation: 2154

you could always try. 

margin: auto;

This will only work with a doctype. So put this above your html tag.

<!DOCTYPE html>

Upvotes: 1

Related Questions