Width:auto taking the size of the parent element

Question

Good day! I did some reasearch and I read here difference between css height : 100% vs height : auto

that height-auto should take the minimum amount of space depending on the children's width.

In my case, the property behaves like width 100%, taking 100% of it's parent's width

Here is the code:

<!DOCTYPE html>
<html>
<head>
<style>
 .header2 {
            float:left; 
            width:900px;
            height:23px;
            background:red;
        }
.buttonHolder {
    margin: 0 auto;
    width:auto;  
    height:24px;
    background:black;
}

.button {
     width:50px;
    height:24px;
     background:blue;
     float:left;
}
</style>
</head>
    <body>
      <div class="header2">
                <div class="buttonHolder">
                    <div class="button"></div> <div class="button"></div> <div class="button"></div>
                </div>
            </div>
    </body>

The question is: Where is my error?

width:100% will occupy the full width of its container. Here in your case it is the div with class header2. — Gangadhar, Jul 16 '13 at 07:09
Yes, however I am trying to figure out why 'buttonHolder' is taking the entire 'header2'. — Stanimirovv, Jul 16 '13 at 07:10
I want it in the middle of the 'header2', with width equal to the sum of it's children. The first part is implemented and working fine. The width part is not. — Stanimirovv, Jul 16 '13 at 07:16

score 0 · Accepted Answer · answered Jul 16 '13 at 07:35

0

.header2 {
            float:left; 
            width:900px;
            height:23px;
            background:red;
            text-align: center;
        }
.buttonHolder {
     display: inline-block;


    height:24px;
    background:black;
}

this should work.

answered Jul 16 '13 at 07:35

Gangadhar

1,739
15
19

It works, however it breaks the 'margin: 0 auto;' which I use to center the div, so it fixed the question but opens a new bug. – Stanimirovv Jul 16 '13 at 07:41
it is aligning in the center of the .header2 div. if you want total container in the center you can put margin:0 auto for .header2 and remove float:left – Gangadhar Jul 16 '13 at 07:53

Width:auto taking the size of the parent element

1 Answers1