Question

I am developing a html page in which there is a div tag and inside that div tag there is a multiple div tags one by one, inside that every div tags there are also some div tags

for example

<div>
     <div class=wrap>
           <div class="child" style="width:30%"></div>
           <div class="child" style="width:30%"></div>   
           <div class="child" style="width:40%"></div>
    </div>

    <div class=wrap>
           <div class="child" style="width:10%"></div>
           <div class="child" style="width:50%"></div>   
           <div class="child" style="width:40%"></div>
    </div>


     <div class=wrap>
           <div class="child" style="width:70%"></div>
           <div class="child" style="width:30%"></div>   

    </div>


    <div class=wrap>
            <div class="child" style="width:100%"></div>
    </div>


    <div class=wrap>

           <div class="child" style="width:80%"></div>
           <div class="child" style="width:10%"></div>   
           <div class="child" style="width:10%"></div>

    </div>

</div>

my expected result is

|------30------|------30------|---------40----------|
|--10--|---------40---------|----------50-----------|
|-----------------70-----------------|------30------|
|------------------------100------------------------|
|-------------------80----------------|--10--|--10--|

BUT THE ACTUAL RESULT I GOT

|------30------|------30------|
---------40----------|
|--10--|---------40---------|
----------50-----------|
|-----------------70-----------------|
------30------|
|------------------------100------------------------|
|-------------------80----------------|--10--|
--10--|

That mean the child div tags when occupy 100% area of parent div tag it overflows and comes in new line but i want that div tag horizontal (if belong same parent div)

I tried and used overflow property of div tag as overflow:hidden but it hide the next div tag which might overflows

below are my css classs
CSS Code:

.child
{
 float:left;
height:50px;
position: relative;
 overflow: hidden;
 border-bottom:1px solid #46464f;
border-right:1px solid #46464f;

}

.wrap {
    height: 50px;
    width: 100%;

    border-top: 1px solid #46464f;
    border-left: 1px solid #46464f;
}

please help…

Answer 1

now define box-sizing in your .child class because u define border left or top

than your child with is calculated this 50%+1

.child{
box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

Live Demo

more about box-sizing