Why border not cover all element

Question

I use border properties of css. When i don't add overflow properties it no cover all elements of id contents.

#contents{border-radius: 10px; border: 1px solid red;overflow:hidden;}

<div id="contents">
        <aside>
         <nav>
          <ul>
           <a class="btn-danger" href="">Home Page</a>
           <a class="btn-danger" href="">Main Settings</a>
           <a class="btn-danger" href="">Sections</a>
           <a class="btn-danger" href="">Pages</a>
           <a class="btn-danger" href="">Comments</a>
           <a class="btn-danger" href="">Library</a>
          </ul>    
         </nav>
        </aside>
        <section id="page">
         <p>Hello </p>
        </section>
    </div>

enter image description here

enter image description here

Why add overflow element into code can be corrected???

Answer 1

From what I can see, you have a floating elements problem, the issue is.

A CSS clearfix is used to fix issues related to floating child elements within a parent element. Without a clearfix your child elements wont behave as you expect them too. When a HTML element is floated it can appear to sit outside its parent element and that means it wont adjust the parents height accordingly.

So in your case the inner elements are floating elements. Thus the container is not detecting the height properly.

Why it works when you use overflow:hidden?

The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements.

So this may be the reason why the parent is filling up the space.

To read more on CSS clearfixes Read here and here