Very helpful, but what am I doing wrong here that I cannot reduce
the height of the divs for the header and footer? here is the code:
#rightboxcontainer
{
border: 1px solid #467CC2;
padding-left: 0px;
padding-right: 0px;
width: 150px;
position: relative;
float: right;
}
#rightboxheader
{
padding-top: 1px;
padding-left: 5px;
padding-right: 7px;
padding-bottom: 0px;
height: 1px;
width: 100%;
background: #467CC2;
}
#rightboxcontent
{
background: #FFF;
border: 1px solid #467CC2;
border-bottom-width: 10px;
border-top-width: 30px;
padding-left: 5px;
padding-right: 5px;
width: 150px;
}
#rightboxfooter
{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 5px;
padding-right: 7px;
height: 1px;
width: 150px;
background: #467CC2;
}
hr.newrule
{
color: #467CC2;
height: 1px;
width: 95%;
}
h2
{
font-family: Tahoma, Arial, sans-serif;
font-size: .90em;
text-align: center;
color: #FFF;
}
h3
{
font: Arial;
font-size: .70em;
font-weight: lighter;
font-family: Tahoma, Arial, sans-serif;
}
<div id="rightboxcontainer">
<div id="rightboxheader"><h2>Title Here<br />Subtitle Here</h2></div>
<div id="rightboxcontent">
<h3><strong>Lead sentence would go here!
</strong> Paragraph starts here and continues down the column to
the break
with rule between paragraphs like this.
<hr class="newrule" /></h3><h3><strong>Next lead sentence starts
here</strong>
Next paragraph starts here, blah, blah, blah...<hr class="newrule"
/></h3></div>
<div id="rightboxfooter"><h2>Footer Here</h2>
</div>
</div>
On Mon, 7 Feb 2005 09:56:14 -0600, "Richard" <An*******@127.001>
wrote:
On Mon, 07 Feb 2005 14:01:20 GMT no*********@nowhere.com wrote:
Hmmm...Not sure that will do it. What I'm after is a column outlined
with a 1 px border. The header will contain text and come down about
50 px. It will have a blue background. The body of the column will
have a whote background and come down about 300-400 px. The footer
will come down about 20 px also have text and a blue background.
Simple. Basic layout found on numerous websites.
<div id="container">
<div id="header" style="width:100%; height:50px; border:solid 1px blue;
background:#00F;">text</div>
<div id="col1" style="what ever and float:left;">text</div>
<div id="col2" style="what ever and float:left;">text</div>
Add more divisions if desired last one should contain "clear:both;".
<div id="footer" style="as you like it">content</div>
</div>