CODEWITHSUNDEEP
htmlcsswidth
Gregory
Gregory

Reputation: 33

Setting multiple divs by width percent to fill parent div next to each other

If you have multiple divs next to each other in a parent div with a fixed width and the child divs width set as a percentage of the fixed parent with, sometimes the child divs aren't all visible on the same line nevertheless the sum of width percentages of the child divs is 100%.

HTML:

<div id="parent">
<div class="child" style="width:51.5%;">1</div>
<div class="child" style="width:0.58333333333333%;">2</div>
<div class="child" style="width:21.666666666667%;">3</div>
<div class="child" style="width:0.56944444444444%;">4</div>
<div class="child" style="width:15%;">5</div>
<div class="child" style="width:0.23611111111111%;">6</div>
<div class="child" style="width:6.7361111111111%;">7</div>
<div class="child" style="width:0.69444444444444%;">8</div>
<div class="child" style="width:2.3611111111111%;">9</div>
<div class="child" style="width:0.47222222222222%;">10</div>
<div class="child" style="width:0.18055555555556%;">11</div>
</div>

CSS:

#parent{
float:left;
width:850px;
overflow:hidden;
}

.child{
border:1px solid red;
float:left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color:blue;
white-space: nowrap;
overflow:hidden;
}

http://jsfiddle.net/4gvgqkkc/3/

Any idea?

Upvotes: 2

Views: 1068

Answers (2)

DracSkywalker
DracSkywalker

Reputation: 364

This happens because the total width of the child divs are greater than 100% and its border are additional. Adjust this by reducing width of divs. Then they will appear in single line

Upvotes: 0

Rasel
Rasel

Reputation: 5734

remove property border from child.because it is increasing the width of children. Also add margin:0;padding:0; to child. If you add margin padding ,they will increase the children size. decrease % width if border is needed that it can allocate additional border

jsfiddle link

Upvotes: 1

Related Questions