Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 588
  • Last Modified:

adding an article div within a content div

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 www.amj4silverlake.org for the code source.
0
Revolution9
Asked:
Revolution9
  • 3
  • 2
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
<div class="content-wrapper">
<div class="content">
</div>
<div class="aside">
</div>
</div>


.content{
overflow:hidden
}
.content, .aside{
float:left;
}

You may need to add widths to the two inner divs
0
 
Kyle HamiltonData ScientistCommented:
Correction:
.content-wrapper{
overflow:hidden
}
0
 
Revolution9Author Commented:
Can you please assist me in placing that code in the correct location?

---

<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Numans' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>Anne-Marie Johnson For Silver Lake</title>
<style type="text/css">
.title{
margin-bottom: 0;
}
.vote{
      margin-bottom: 0;
      margin-left: 0;
      text-align: left;
}
.sidebarText{
      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;
      position:relative;
}

ul.MenuBarHorizontal
{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 80%;
        background-color:#cc9966;
      cursor: default;
      width: auto;
      position:absolute;
      bottom:10px;
}
.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 {
      clear:both;
      height:0;
      font-size: 1px;
      line-height: 0px;
}
.footertype {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      font-weight: normal;
      text-align: center;
      color: #FFF;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>

<body>

<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>
  </ul>
  </div>
  <div class="sidebar1">
 
    <p><iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1511+Micheltorena+Street+Los+Angeles,+CA+90026&aq=&sll=34.020479,-118.411732&sspn=1.173497,1.737213&ie=UTF8&hq=&hnear=1511+Micheltorena+St,+Los+Angeles,+California+90026&t=m&ll=34.089275,-118.275461&spn=0.01777,0.021372&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=1511+Micheltorena+Street+Los+Angeles,+CA+90026&aq=&sll=34.020479,-118.411732&sspn=1.173497,1.737213&ie=UTF8&hq=&hnear=1511+Micheltorena+St,+Los+Angeles,+California+90026&t=m&ll=34.089275,-118.275461&spn=0.01777,0.021372&z=14&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
    </h4>
  <!-- end .sidebar1 --></div>
  <div class="content">
<h1 class="title">Anne-Marie Johnson</h1>
    <h2>for Silver Lake Neighborhood Council<br>
      At-Large Representative
    </h2>
    <p>As your SLNC At-Large Representative, I will be an advocate for...</p>
    <ul>
    <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"});
</script>
</body>
</html>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
HagayMandelCommented:
Check this.
0
 
Revolution9Author Commented:
Yeah, but look what happened to the menu.  Can you confirm?
0
 
HagayMandelCommented:
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?.
0
 
Revolution9Author Commented:
Thanks very much!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now