CODEWITHSUNDEEP
csshtmlborder
Sandoichi
Sandoichi

Reputation: 254

sizing html elements with borders

I have a question which may seem very basic but it has been bugging me for quite some time.

My issue is with width percentages. Say I have a container div at 800px and 2 divs inside it that are both set to float:left and width 50%. This would make them side by side and fill up the container, however if I wanted to add a border to those inner divs, it would make them too big to fix inside the container side by side, and would make one drop below the other.

So my question is: Is there a sizing method for auto filling a container that takes borders into account without having to manually specify pixel width (in the case of the 800px container, each of the two div's inside with a 1px border would make each div 398px wide...)?

thanks

Upvotes: 2

Views: 71

Answers (1)

sandeep
sandeep

Reputation: 92803

Yes there is method called box-sizing write this:

    .parent{
    overflow:hidden;
    width:800px;
}
.child{
    width:50%;
    float:left;
    background:red;
    border:2px solid green;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box; 
}

Check this http://jsfiddle.net/QevgD/

read this article http://www.quirksmode.org/css/box.html

But it's work till IE8 & above.

Upvotes: 3

Related Questions