1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Need assistance formatting a page node

Discussion in 'Styling and Customization Questions' started by Coop1979, Jan 23, 2013.

  1. Coop1979

    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.png
    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!
     
  2. Coop1979

    Coop1979 Well-Known Member

    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?
     

Share This Page