CODEWITHSUNDEEP
htmlcss
bbsimonbb
bbsimonbb

Reputation: 29002

In HTML, how can I have a border and fill the container?

The following code snippet shows a div in a body. Both have height and width at 100%. The div has a border. The problem is that the browsers make the content box of the div the same size as the body, sending the bottom and right borders out of view. I'm obliged to keep the 100% rules, the whole layout depends on them. How can I make my borders appear? What am I doing wrong?

Simon

<html>
    <body style="width:100%;height:100%;">
        <div id="bdiv" style="height:100%;width:100%;border:2px solid green;">Difficult to remain positive in such conditions</div>
    </body>
</html>

Upvotes: 0

Views: 2894

Answers (1)

Danield
Danield

Reputation: 125473

1) Remove default margin of body

2) Set box-sizing: border-box; the div so that the border is rendered within the div

body
{
    margin:0;
}
div
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

FIDDLE

Upvotes: 2

Related Questions