bradyj
09-19-2003, 02:04 AM
I'm trying to build the two column layout with <div> such as what you see on:
http://www.alistapart.com/stories/seo/
However, I can't get the two div's to 1) make a background color on the right side that sticks without playing with the left background (which needs to be transparent) 2) A line that seperates the two in the middle seems to either overlap too much on the right or left side depending on the browser.
http://www.dotfive.com/angie/index2.html
Screen shots would be helpful as well if you can!!
CSS is:
.leftstuff {
float:left;
width:67%;
padding-right: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #333333;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #999999;
}
.rightstuff {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-left: 10px;
list-style-type: disc;
background-color: #666666;
}
XHTML is (it was long, but I wanted to show the structure, so I deleted some):
<div class="leftstuff">
<h2>Serving Families & children in Solano, Napa and Yolo Counties</h2>
<h1>Mission:</h1>
<p>The mission of the Children's Nurturing Project is to promote
healthy parent-child relationships through support services and education.
Children will develop socially, physically, and emotionally through
nurturing and personal growth, leaving a legacy of hope for future
generations.</p>
</div>
<div class="rightstuff">
<h3>Nurturing Specialists:</h3>
<ul>
<li>home visiting services</li>
<li>parent education & support</li>
<li>case management</li>
<li>prenatal education</li>
<li>group facilitation</li>
<li>parenting skills assessments</li>
<li>breastfeeding support</li>
<li>family conferencing</li>
</ul>
Yeah, way too many lists, ya think? I also have a container div for that code I listed which is absolutely positioned, and I imagine causing some problems as well... Thank you!!!:)
http://www.alistapart.com/stories/seo/
However, I can't get the two div's to 1) make a background color on the right side that sticks without playing with the left background (which needs to be transparent) 2) A line that seperates the two in the middle seems to either overlap too much on the right or left side depending on the browser.
http://www.dotfive.com/angie/index2.html
Screen shots would be helpful as well if you can!!
CSS is:
.leftstuff {
float:left;
width:67%;
padding-right: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #333333;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #999999;
}
.rightstuff {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-left: 10px;
list-style-type: disc;
background-color: #666666;
}
XHTML is (it was long, but I wanted to show the structure, so I deleted some):
<div class="leftstuff">
<h2>Serving Families & children in Solano, Napa and Yolo Counties</h2>
<h1>Mission:</h1>
<p>The mission of the Children's Nurturing Project is to promote
healthy parent-child relationships through support services and education.
Children will develop socially, physically, and emotionally through
nurturing and personal growth, leaving a legacy of hope for future
generations.</p>
</div>
<div class="rightstuff">
<h3>Nurturing Specialists:</h3>
<ul>
<li>home visiting services</li>
<li>parent education & support</li>
<li>case management</li>
<li>prenatal education</li>
<li>group facilitation</li>
<li>parenting skills assessments</li>
<li>breastfeeding support</li>
<li>family conferencing</li>
</ul>
Yeah, way too many lists, ya think? I also have a container div for that code I listed which is absolutely positioned, and I imagine causing some problems as well... Thank you!!!:)