CODEWITHSUNDEEP
csshtmlwidthborder
Snapper
Snapper

Reputation: 686

div with % width and px border

I'm trying to create a div with 3 divs inside. 

    .outter
    {
        right: 100px;
        border: 10px solid white;
    }
    .main
    {
        overflow: hidden;
        width: 100%;
        height: 150px;
    }
    .left
    {
        float: left;
        width: 40%;
        height: 100%;
        background-color: green;
        border-right: 5px solid white;
    }
    .center
    {
        float: left;
        width: 40%;
        height: 100%;
        background-color: red;
        border-left: 5px solid white;
        border-right: 5px solid white;
    }
    .right
    {
        float: right;
        width: 20%;
        height: 100%;
        background-color: orange;
        border-left: 5px solid white;
    }



<div class="outter">
    <div class="main">
        <div class="left">
        </div>
        <div class="center">
        </div>
        <div class="right">
        </div>
    </div>
</div>

This is what I got so far. -The parent div should have a right distance fixed of 100px, a border of 10px white and the widht is the 100% - 100px; -The inside divs have 40% + 40% + 20% with a distance between them of 10 px (thats why I putted the border-left 5 and border-right 5.

enter image description here

I'm having problems setting this. What I need is to have fixed sized borders and margin to the right. the other divs should be dynamic to fullfill the 100% width.

Can anyone help me?

Regards,

Upvotes: 4

Views: 5198

Answers (2)

sandeep
sandeep

Reputation: 92803

You can use box-sizing for this. write like this:

.main,
.main >*{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

Check this:

http://jsfiddle.net/ubtdT/

Upvotes: 5

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

You have a problem with the box-model. An element cannot have 100% width and then a 10px border, because the border is added outside the 100% width, which is causing your problem.

Depending on what browsers you intend to support, you can make use of CSS3's box-sizing property. By setting box-sizing: border-box;, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box. Which should solve your problem. Note the limited support in older browsers.

If you want to go even more experimental you can use the new CSS3 calc() to actually calculate a dynamic width:

/* Firefox */
width: -moz-calc(75% - 100px);
/* WebKit */
width: -webkit-calc(75% - 100px);
/* Opera */
width: -o-calc(75% - 100px);
/* Standard */
width: calc(75% - 100px);

Upvotes: 2

Related Questions