CODEWITHSUNDEEP
htmlcss960.gs
potato
potato

Reputation: 4589

How to add padding and border that doesn't change width if using 960 grid system

I am using 960.gs grid_3 to make a row of 4 elements and grid_4 to make a row of 3 elements. I added padding to my grid_3 and grid_4. They doesn't fit anymore in the row because padding was added to the width. The same happens if I add border. I get it, this is how css works. Is there a way around this? I would really like 4 grid_3 elements ( or 3 grid_4 elements)in a row with padding and border. This is the screenshot of what I got after adding padding or border. The image shows border-case.

enter image description here

This is the code:

//html

<!DOCTYPE html>
<html>
  <head>
<!--   <link rel="stylesheet" type="text/css"  href="css/960_12_col_rtl.css"> -->
  <link href="css/custom.css" type="text/css" rel="stylesheet">
  </head>
    <body>
    <div class="container_12 clearfix">
        <div id="header" class="grid_12">
            <h1>HUHUHUHU</h1>
        </div>
        <div id="comment1" class="grid_3">
            <p>This is comment 1!</p>
        </div>
        <div id="comment2" class="grid_3">
            <p>This is comment 2!</p>
        </div>
        <div id="comment3" class="grid_3">
            <p>This is comment 3!</p>
        </div>
        <div id="comment4" class="grid_3">
            <p>This is comment 4!</p>
        </div>

        <div id="leftImage" class="grid_4">
            <p id="image1">image1</p>
        </div>      
        <div id="centerImage" class="grid_4">
            <p id="image2">image2</p>
        </div>
        <div id="rightImage" class="grid_4">
            <p id="image3">image3</p>
        </div>
    </div>
    </body>
</html>

//css:

@import url("960_12_col.css");

#header{
background-color: blue;
height: 400px;
margin-bottom: 30px;
}
.grid_4{
text-align: center;
background-color: red;
margin-top: 30px;
height: 250px;
border: 20px solid black;
}
.grid_3{
/* padding:30px; */
border: 5px solid black;
margin: 10px;
height: 140px;
}
#comment1{
text-align: left;
}
#comment2{
text-align: center;
}
#comment3{
text-align: center;
}
#comment4{
text-align: right;
}

Upvotes: 0

Views: 411

Answers (1)

Shaggy
Shaggy

Reputation: 6796

It sounds like you're looking for the box-sizing property.

Using a value of border-box will ensure that the dimensions you set in your CSS for an element include that element's padding and border.

Upvotes: 1

Related Questions