CODEWITHSUNDEEP
csshtml
Raj
Raj

Reputation: 361

Divs inside Div with overflow property of css

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...

Upvotes: 1

Views: 2074

Answers (3)

No Results Found
No Results Found

Reputation: 102735

Your left and right borders each add 1px to the total width. This is not too big a deal for the .wrap elements, but for the .child elements it makes them not all fit in one row, since they each have that extra 1px width.

Here's your layout using outline (which doesn't add width) to show where the child elements are: http://jsfiddle.net/tWESq/

You'll have to remove the left and right borders. As a workaround, you might have to add another inner div to each .child element and set the border on that instead. If you can use the box-sizing property, that would also be a solution.

Upvotes: 2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

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

Upvotes: 3

Maxim Pechenin
Maxim Pechenin

Reputation: 344

I think you have got spaces between some divs. Try to delete all spaces like this

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

or maybe it's because

border-right:1px solid #46464f;

try to delete it.

Upvotes: 0

Related Questions