Expand outer nested div to 100%

Question

I have this code

.outer {
  background-color: #ff00ff;
  width: 100%;
}

.outer div {
  float: left;
  background-color: #0000ff;

}

<div class="outer">
  <div>
    test1    <br/> test1
  </div>
  <div>
    test2    <br/> test2
  </div> 
</div>

https://jsfiddle.net/jcb5mdqa/

It looks like

but I want the outer to have a width of 100% like in .css written.

Expected result

What do I need to change?

Because all the content of .outer is floating, they are removed from the document flow. As a result, .outer is empty and not shown. — Gerard, Jun 08 '17 at 09:16

score 2 · Accepted Answer · answered Jun 08 '17 at 09:14

.outer has width 100% already because it's a block element. It lacks height because the content is floated. To give .outer the height of the content, add overflow: auto to the class definition:

.outer {
  background-color: #ff00ff;
  overflow: auto;
}

.outer div {
  float: left;
  background-color: #0000ff;
}

<div class="outer">
  <div>
    test1    <br/> test1
  </div>
  <div>
    test2    <br/> test2
  </div> 
</div>

score 1 · Answer 2 · answered Jun 08 '17 at 09:13

1

Use clearfix

.outer {
  background-color: #ff00ff;
  width: 100%;
}

.outer div {
  float: left;
  background-color: #0000ff;

}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="outer clearfix">
  <div>
    test1    <br/> test1
  </div>
  <div>
    test2    <br/> test2
  </div> 
</div>

answered Jun 08 '17 at 09:13

Abhishek Pandey

13,302
8
38
68

@Toshi I answered similar [question](https://stackoverflow.com/a/44428121/6670723) , you can check it for more details. – Abhishek Pandey Jun 08 '17 at 09:23
isn't `overflow: auto;` the better option? – Toshi Jun 08 '17 at 09:26
`overflow: auto` does not clear floats [follow this link](https://stackoverflow.com/questions/22129343/why-does-overflow-auto-clear-floats-and-why-are-clear-floats-needed) – Abhishek Pandey Jun 08 '17 at 10:13

score 1 · Answer 3 · answered Jun 08 '17 at 09:55

There are two aspects to resolve this question:

use clear properties, whether add :after to .outer class or add a real div as the last .outer container element can do;

.outer {
  background-color: #ff00ff;
  width: 100%;
}
.outer:after {
  display: block;
  content: "";
  clear: both;
}
.outer div {
  float: left;
  background-color: #0000ff;
}

<div class="outer">
  <div>
    test1
    <br/> test1
    <br/> test1
  </div>
  <div>
    test2
    <br/> test2
    <br/> test2
  </div> 
</div>

Establish a new block formatting context. According to CSS2.1 specification, the way to create a new BFC is below:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

.outer {
  background-color: #ff00ff;
  width: 100%;
  /* float and below overflow peoperties can both establish a new BFC */
  // float: left; 
  overflow: auto;
}

.outer div {
  float: left;
  background-color: #0000ff;
}

<div class="outer">
  <div>
    test1
    <br/> test1
    <br/> test1
  </div>
  <div>
    test2
    <br/> test2
    <br/> test2
  </div> 
</div>

score 0 · Answer 4 · answered Jun 08 '17 at 09:16

Use overflow:auto

.outer {
  background-color: #ff00ff;
  width: 100%;
  overflow:auto;
}

.outer div {
  float: left;
  background-color: #0000ff;

}

<div class="outer">
  <div>
    test1    <br/> test1
  </div>
  <div>
    test2    <br/> test2
  </div> 
</div>

Ehsan · Answer 5 · 2017-06-08T10:10:37.470

Method 1: use <br style="clear: both">

.outer {
  background-color: #ff00ff;
  width: 100%;
}

.outer div {
  float: left;
  background-color: #0000ff;
}

<div class="outer">
  <div>
    test1    <br/> test1
  </div>
  <div>
    test2    <br/> test2
  </div> 
  <br style="clear: both">
</div>

Method 2 :use overflow:hidden

.outer {
  background-color: #ff00ff;
  width: 100%;
  overflow: hidden;/*/<=========new/*/
}

Mehod 3: use of :after

.outer:after {
    content: '';
    clear: both;
    display: block;
}

Expand outer nested div to 100%

5 Answers5