Question: I have `div`'s inside a `div`

```
<div id="out" align="center">
      <div id="in1" align="left">111</div>
      <div id="in2" align="left">aaaaaaaaaaaaaaaaaaaaaa</div>
      <div id="in3" align="left">bbbb</div>
      <div id="in4" align="left">6516519191</div>
      <div id="in5" align="left">apple</div>
      <div id="in6" align="left">ii</div>
</div>

```

The expected result is a `div` with size=(max inside div size) which is centered. Then items inside it are all aligned left:

```
                         111
                         aaaaaaaaaaaaaaaaaaaaaa
                         bbbb
                         6516519191
                         apple
                         ii

```

I don't want to give `width` to the outer div since I have no idea about size of the items from before.

is there any way?

Answer: 
You can by inserting another (outer) container div.

* Outer div container: width 100% and centered text alignment;
* Inner div container: inline-block and left text alignment

CSS

```
#outerContainer {
    width: 100%;
    text-align: center;
}

#innerContainer {
    display: inline-block;
    text-align: left;
}

```

HTML

```
<div id="outerContainer">
    <div id="innerContainer">
        <div id="in1">111</div>
        <div id="in2">aaaaaaaaaaaaaaaaaaaaaa</div>
    </div>
</div>

```

Running Demo: <http://jsfiddle.net/nvMmx/>
Set the outer `width:100%;`
Or define the inner width otherwise

CSS
---

```
.abc{
float:left;
width:100%;
}

```

HTML
----

```
<div id="out" align="center">
      <div id="in1" class="abc">111</div>
      <div id="in2" class="abc">aaaaaaaaaaaaaaaaaaaaaa</div>
      <div id="in3" class="abc">bbbb</div>
      <div id="in4" class="abc">6516519191</div>
      <div id="in5" class="abc">apple</div>
      <div id="in6" class="abc">ii</div>
</div>

```