Question

I have the following HTML code / structure:

<div id="container">
 <div id="div1">text</div>
 <div id="div2">more text</div>
 <div id="div3">nice text</div>
 <div id="div4">bad text</div>
 <div id="div5">hello world</div>
 <div id="div6">foo</div>
 <div id="div7">bar</div>
 <div id="div8">Dick Beatie</div>
 <div id="div9">Chuck Norris</div>
 <div id="div10">Brian Blessard</div>
</div>

and say I have the following CSS:

#container{
  overflow:auto; 
  width:100%;
}

#container div{
 float:left;
 padding:10px;
 text-align:center;
 width:10%;
}

The DIVs within the container are an equal size but don’t fit within the container! How do I make them fit as they spill onto the next line currently. Please don”t say I should use a table, I know I should use one. I also realise that I could reduce the width of the DIVs however I”d then have to adjust the width of the container.

Thanks for the advice.

Ps. I bet some joker says use a table!

Answer 1

Use box-sizing: bordex-box to make padding included in width.