Need assistance formatting a page node

Coop1979

Well-known member
I need some help formatting a page node with some borders to separate content. I am creating a template to be re-used over and over again, using a 2-Column fluid CSS layout. I just need some assistance getting borders (pulled from my template's css) to show up separating the content where you see the red lines in the screenshot.

Screen Shot 2013-01-23 at 2.09.53 PM.webp
Here is the CSS code as it stands now.

Code:
<style type="text/css">
 
#contentwrapper{
float: left;
width: 100%;
}
 
#contentcolumn{
margin-left: 350px; /*Set left margin to LeftColumnWidth*/
}
 
#leftcolumn{
float: left;
width: 350px; /*Width of left column*/
margin-left: -100%;
}
 
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
 
#footer a{
color: #FFFF80;
}
 
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
 
</style>
 
</head>
<body>
<div id="maincontainer">
 
<div id="contentwrapper">
<div id="contentcolumn">
<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=dHJYSi1MU1VwRnNVSGlpTmwzd3l0bEE6MQ&f='Trebuchet MS'" width="600" height="1638" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
</div>
 
<div id="leftcolumn">
<div class="messageText ugc baseHtml">
<img class="bbCodeImage" src="http://priuschat.com/images/dealerships/scottclarktoyota.jpg" />
<h3>
13000 East Independence Boulevard</h3>
<h3> Matthews, NC 28104</h3>
<h3>
(888) 638-6048</h3>
<h3>
blah Dealer Contact:</h3>
<p>
blah</p>
<p>
Office:&nbsp;blah</p>
<p>
Cell:&nbsp;blah</p>
<p>
Email:&nbsp;blah</p>
<p><iframe width="350" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?ie=UTF8&amp;q=scott+clark+toyota&amp;fb=1&amp;gl=us&amp;hq=scott+clark+toyota&amp;hnear=0x88541fc4fc381a81:0x884650e6bf43d164,Charlotte,+NC&amp;cid=0,0,10549974205555627211&amp;t=m&amp;ll=35.188961,-80.671921&amp;spn=0.196408,0.240326&amp;z=11&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?ie=UTF8&amp;q=scott+clark+toyota&amp;fb=1&amp;gl=us&amp;hq=scott+clark+toyota&amp;hnear=0x88541fc4fc381a81:0x884650e6bf43d164,Charlotte,+NC&amp;cid=0,0,10549974205555627211&amp;t=m&amp;ll=35.188961,-80.671921&amp;spn=0.196408,0.240326&amp;z=11&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small></p>
 
</div>
 
</div>
</div>
</body>
</html>

Thanks for any help you can offer!
 
Ok, I'm part of the way there. I enclosed the div on the right in messageMeta to put a box around it. Now I'm just trying to figure out how to add more divs within the "leftcolumn" div so that I can put the dashed line that I use for my signature separator between the 3 areas that I want to separate (as you see in the image above).

Ideas?
 
Back
Top Bottom