I am using CSS to create a 3-column page layout with header and footer. Take the Left_Col div, for example, which has a width of 200px. I would like to have a left and right padding of 10px for this div such that the text within the Left_Col essentially starts at pixel 10 and wraps at pixel 190.
In the below example, to acheive this, I create another NEST DIV within the Left_COL div and set the margin to StdMargin (10px). This works, but I thought of another alternative to achieve the same result, namely to forgo the inner "stdMargin" inner div and to add a "padding 10px" attribute on the Let_Col div. However, I was disappointed that this seemed to INCREASE the width of the LEFT_COL div beyond its defined 200px width and thereby overlapping with the middle CONTENT div, which is not what I wanted.
Why does this happen? Is there a way to avoid th nested inner div? Too many nested objects and I start seeing crossed eyed...
Here is my css page:
/* CSS layout */
body {
/*
margin: 0;
padding: 0;
*/
margin: 0 auto;
width: 1000px;
}
#masthead {
background-color:aqua;
}
#top_nav {
background-color:Yellow;
}
#container {
background-color:maroon;
}
#left_col {
width: 200px;
float: left;
background-color:#99FF33;
}
#page_content {
margin-left: 200px;
margin-right: 200px;
background-color:#99CCFF;
}
#right_col {
width: 200px;
float: right;
background-color:#F1E2E0;
}
#footer {
clear: both;
background-color:#BBBBFF;
}
.stdmargins{
margin:5px;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<title>masthead</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="3Column.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="PageWidth">
<div id="masthead">
</div>
<div id="top_nav">
<div class="stdmargins">
Top Nav</div>
</div>
<div id="container">Container
<div id="left_col">
<div class="stdmargins">
Left Column Top<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Left Col bottom<br />
</div>
</div>
<div id="right_col">
<div class="stdmargins">
Right top<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Right bott<br />
</div>
</div>
<div id="page_content">
<div class="stdmargins">
</div>
</div>
</div>
<div id="footer">
Footer</div>
</div>
</body>
</html>