Padding and Borders

This demonstration will show how to adjust width and height settings when adding padding and borders to web pages developed using division tags and CSS.

In the top demo the page is set up for a 800 pixel width using the division named top-division as a container. The height is set to 450 pixels. A border is added to the container. Only padding is added to the nested divisions. The bottom demo shows the adjustment for padding and borders.

The CSS for the top demo is shown here:

 
#top-division { 
width: 800px; 
height: 450px; 
margin-left: auto; 
margin: right: auto; 
border: solid #004f9d 1px 
}

We want to divide the web page into 2 adjacent sections. Without padding our sections would be 150 pixels and 650 pixels wide.

Adding Padding to Nested Divisions

Padding, margins and borders add width and height to a division. This demonstration shows how to adjust nested divisions so that they align properly within a container division.


Basic HTML Code

<div ID="top-division">
<div id="left-div">
</div>
<div id="right-div">
</div>
</div>

Adjusted Height and Width

We want to add 8 pixels of padding on all 4 sides of each nested division. Because this adds to the width and height of each division we adjust the width and height settings as shown:

 
#left-div { 
float: left; 
width: 134px; 
height: 434px; 
background-color: #004f9d; 
padding: 8px 8px 8px 8px 
}
 
 
#right-div { 
float: right; 
width: 634px; 
height: 434px; 
padding: 8px 8px 8px 8px 
}


Padding and Borders

This demonstration shows the adjustments in width and height settings when padding and borders are added to the nested divisions.

HTML code

<div id="bottom-division">
<div id="left-div-bottom">
</div>
<div id="right-div-bottom">
</div>
</div>

The Adjusted Width and Height

Notice that the right nested division was adjusted for the 1 pixel border that was added to all 4 sides.

 
#bottom-division { 
width: 800px; 
height: 450px; 
margin-left: auto; 
margin: right: auto; 
} 

 
#left-div-bottom { 
float: left; 
width: 134px; 
height: 434px; 
background-color: #ff0000; 
padding: 8px 8px 8px 8px 
} 

 
#right-div-bottom { 
float: right; 
width: 632px; 
height: 432px; 
padding: 8px 8px 8px 8px; 
border: solid #004f9d 1px 
}



Note: This method of nesting divisions to create columns with a fixed height setting is okay for small websites with a limited amount of content on the web pages. We're in the process of creating a short tutorial on creating pages with columns that flex with the height of the longest column.