CODEWITHSUNDEEP
csshtmlborder
user2225516
user2225516

Reputation: 81

Border making div's misbehave

So I'm trying to get into html/css again, and having some issues with the border property. If the border of the div ONE is 1, padding misbehaves in the div TWO. This can be "fixed" by using margins on TWO instead of padding. If there is no border on ONE, the margins on TWO push ONE down with it. Using padding instead of margins fixes this, however, it does not make sense. Anyone have any words of wisdom on the use of borders and divs? Pretty confused here.

The code below is for margins, and no border.

HTML Code:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/tyle.css" />
</head>
<body>
    <div class="ONE">
        <div class="TWO">This is some text as a test.</div>
    </div>
</body>
</html>

CSS style:

body {
    background: #e3f1e2;
    margin: 0px;
    padding: 0px;
    font-family: arial;
    font-size: 12px;
    color: #000000;
}

a:link {text-decoration: none; color: #FFFFFF}
a.menu:link {text-decoration: none; color: #FFFFFF}
a:visited {text-decoration: none; color: #FFFFFF}

div.ONE {
    /*border: 1px solid #CCCCCC;*/
    background-image: url("../test.jpg");
    background-repeat: no-repeat;
    text-align: left;
    width: 1024px;
    height: 800px;
    padding: 0px;
    margin: 0px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    }
div.TWO {
    margin-top: 80px;
    margin-left: 120px;
    }

Upvotes: 0

Views: 70

Answers (1)

erdimeola
erdimeola

Reputation: 854

borders are usually are on the outside. You can use box-sizing:border-box; in your css to behave. also see : Placing border inside of div and not on its edge

Upvotes: 1

Related Questions