ansaurus

Question

How do I center a div and make it expand around the divs inside of it?

Answer 1

A:

this is a tricky one, but I use the following code in stylesheets;

<style>div.sentor {text-align: center; height: 100%;} div.child{margin-left: auto; margin-right: auto; width: 95%; height: 100%;}</style>

then in the body;

<div class="sentor">
<div class="child">
 <div id="mycontent">

this should do the trick

simon622 2009-05-20 16:24:48

Answer 2

+6 A:

Use auto as left and right margin to center the element.

Put an element after the floating elements and use clear to put it below them. As it's not floating, it will affect the size of the outer div.

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
    <div style="clear: both; height: 0; overflow: hidden;"></div>
</div>

Guffa 2009-05-20 16:25:33

Thanks. I figured there was a way, But I just couldn't figure it out.

Sruly 2009-05-20 17:19:41

Answer 3

A:

Maybe I'm not understanding your question well enough, but I think you're looking for something similar to this. Here's our simple layout:

<html>
    <head>
        ...
    </head>

    <body>

        <div id="center">
            <!-- your content -->
        </div>

    </body>

</html>

To get the contents of div#center to move to the center of the page, we need the following CSS:

body {
    text-align: center;
}

div#center {
    text-align: left;
    width: 600px;    // Or some other arbitrary width
    margin: 0 auto;
}

This will center everything within body. However, the text-align: center; property will also be applied to the children of body, so we cancel that out with the second style rule. Alternatively, in place of div#center, you could use the following style rule:

body * {
    text-align: left;
}

Andrew Noyes 2009-05-20 16:31:45

This uses a bug in Internet Explorer. It doesn't work in any other browser, as they follow the standard and don't apply text-align to block elements.

Guffa 2009-05-20 18:25:41

Yeah I left out the margin: 0 auto; part. I had forgotten about that. I've even incorporated it into numerous works of my own!

Andrew Noyes 2009-05-27 17:40:45

Answer 4

A:

Use:

<div style="margin:0 auto; overflow:hidden; background-color: Red; width: 980px; id="container">

The margin: 0 auto; will center the red div.

The overflow: hidden; will make the red div stretch to contain the two floating divs.

Emily 2009-05-20 21:24:34

ansaurus

tags:

views:

answers:

How do I center a div and make it expand around the divs inside of it?

related questions