adding an article div within a content div

Posted on 2012-09-21
Last Modified: 2012-09-21
home page layoutI need your help!  I want to add an article .div within the main content.div on this web page.  I'm a bit short on experience.  Please see the attached layout.  I'm fine with the header, sidebar, content and footer (thanks to the Dreamweaver template and a couple of you guys on Experts-Exchange) - however, adding the .div to hold the photo and Silverlake Maintaining the Charm is a challenge.

Thanks for your help.

Please see for the code source.
Question by:Revolution9
    LVL 25

    Expert Comment

    by:Kyle Hamilton
    <div class="content-wrapper">
    <div class="content">
    <div class="aside">

    .content, .aside{

    You may need to add widths to the two inner divs
    LVL 25

    Expert Comment

    by:Kyle Hamilton

    Author Comment

    Can you please assist me in placing that code in the correct location?


    <link href='' rel='stylesheet' type='text/css'>
    <meta charset="UTF-8">
    <title>Anne-Marie Johnson For Silver Lake</title>
    <style type="text/css">
    margin-bottom: 0;
          margin-bottom: 0;
          margin-left: 0;
          text-align: left;
          margin-bottom: 0;
          margin-left: 0;
          text-align: left;
    body {
          margin: 0;
          padding: 0;
          color: #000;
          background-color: #cc9966;
          background-image: url(_images/amjSLbkgnd.jpg);
          background-repeat: no-repeat;
          height: 342px;
          font-family: Numans, Verdana, Arial, Helvetica, sans-serif;
          font-size: 100%;
          line-height: 1.4;
          font-weight: bold;

    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
    h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;       
          padding-right: 15px;
          padding-left: 15px;
    a img {
          border: none;
    a:link {
          color: #42413C;
          text-decoration: underline;
    a:visited {
          color: #6E6C64;
          text-decoration: underline;
    a:hover, a:active, a:focus {
          text-decoration: none;

    .container {
          width: 1000px;
          background: #f7f4ff;
          margin: 0 auto;
          margin-top: 50px;
          -moz-box-shadow: 0px 0px 40px #333366;
          -webkit-box-shadow: 0px 0px 40px #333366;
          box-shadow: 0px 0px 40px #333366;
          font-family: Numans, Verdana, Arial, Helvetica, sans-serif;
    .header {
          background: #ADB96E url(_images/amjHeader.jpg) no-repeat 0 0;
          height: 342px;

          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 80%;
          cursor: default;
          width: auto;
    .sidebar1 {
          float: left;
          width: 300px;
          margin-top: 20px;
          background: #669999;
          padding-bottom: 10px;
          padding-top: 15px;
          padding-left: 10px;
    .content {
          padding: 10px 0;
          width: 686px;
          float: left;
          background-color: #f7f4ff

    .content ul, .content ol {
          padding: 0 15px 15px 40px;

    ul.nav {
          list-style: none;
          border-top: 1px solid #666;
          margin-bottom: 15px;
    ul.nav li {
          border-bottom: 1px solid #666;
    ul.nav a, ul.nav a:visited {
          padding: 5px 5px 5px 15px;
          display: block;
          width: 160px;
          text-decoration: none;
          background: #cc9966;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
          background: #ADB96E;
          color: #FFF;

    .footer {
          padding: 10px 0;
          background: #333366;
          position: relative;
          clear: both;
    .fltrt {  
          float: right;
          margin-left: 8px;
    .fltlft {
          float: left;
          margin-right: 8px;
    .clearfloat {
          font-size: 1px;
          line-height: 0px;
    .footertype {
          font-family: Verdana, Geneva, sans-serif;
          font-size: 12px;
          font-weight: normal;
          text-align: center;
          color: #FFF;
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">


    <div class="container">
      <div class="header">
      <!-- end .header -->
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="#">HOME</a>      </li>
        <li><a href="goals.html">GOALS</a></li>
        <li><a href="bio.html">BIO</a>      </li>
        <li><a href="vote.html">VOTE</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="contact.html">CONTACT</a></li>
      <div class="sidebar1">
        <p><iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=";source=s_q&amp;hl=en&amp;geocode=&amp;q=1511+Micheltorena+Street+Los+Angeles,+CA+90026&amp;aq=&amp;sll=34.020479,-118.411732&amp;sspn=1.173497,1.737213&amp;ie=UTF8&amp;hq=&amp;hnear=1511+Micheltorena+St,+Los+Angeles,+California+90026&amp;t=m&amp;ll=34.089275,-118.275461&amp;spn=0.01777,0.021372&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href=";source=embed&amp;hl=en&amp;geocode=&amp;q=1511+Micheltorena+Street+Los+Angeles,+CA+90026&amp;aq=&amp;sll=34.020479,-118.411732&amp;sspn=1.173497,1.737213&amp;ie=UTF8&amp;hq=&amp;hnear=1511+Micheltorena+St,+Los+Angeles,+California+90026&amp;t=m&amp;ll=34.089275,-118.275461&amp;spn=0.01777,0.021372&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>&nbsp;    </p>
        <h1 class="vote">VOTE!</h1><br>
        <h4 class="sidebarText">I need your support.
        Vote for Anne-Marie Johnson for SLNC At-Large Representative.
        <br> If you live, work or have taken advantage of what Silver Lake offers, you can VOTE!<br>
        <br> Saturday, October 6th, 2012<br>Polls Open at 10:00 a.m. - 4:00 p.m.<br>
        Micheltorena Street School<br>
        1511 Micheltorena Street<br>
        Los Angeles, CA  90026<br>
        Free parking available
      <!-- end .sidebar1 --></div>
      <div class="content">
    <h1 class="title">Anne-Marie Johnson</h1>
        <h2>for Silver Lake Neighborhood Council<br>
          At-Large Representative
        <p>As your SLNC At-Large Representative, I will be an advocate for...</p>
        <li>Less density, but a dedication to consider responsible and affordable housing projects</li>
        <li>Pedestrian friendly streets</li>
        <li>Putting the needs of Silver Lake residents first</li>
        <li>Protecting the overall charm and quality-of-life in Silver Lake</li>
        <li>I need your support.</li>
        <li>Vote for Anne-Marie Johnson for SLNC At-Large Representative</li>
        <!-- end .content --></div>
      <div class="footer">
        <p class="footertype">©2012 Anne-Marie Johnson</p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    LVL 16

    Accepted Solution

    Check this.

    Author Comment

    Yeah, but look what happened to the menu.  Can you confirm?
    LVL 16

    Expert Comment

    Check again!
    It was only an issue of your stylesheet link.
    Anyhow, this is a sample of the desired layout, is that what you want?.

    Author Closing Comment

    Thanks very much!

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    Zoom web page in 2 21
    jquery, populate, auto complete 8 34
    css question -easy, i think 2 20
    javascript to html map 8 15
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now