?
Solved

Div columns not following my layout

Posted on 2012-09-22
12
Medium Priority
?
527 Views
Last Modified: 2012-09-27
I've set up a website, and I'm not understanding why my divs are not aligning properly.  The sidebar div should go from the header down to the footer, and the footer should span the complete width of the container.

HELP!!!

Please see www.amj4silverlake.org

Here is the code for the index page.


<!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;
text-align: left;
}
.mainHome{
align
      font-family: Numans, Arial, Helvetica, sans-serif;
      text-align: left;
}
.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;
      background: #669999;
      padding-bottom: 10px;
      padding-top: 15px;
      padding-left: 10px;
}
.content {
      padding: 10px 0;
      width: 686px;
      float: left;
      background-color: #f7f4ff;
      text-align: center;
}

.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;
}
#article {
      width: 275px;
      float: right;
      margin-right:12px;
      background-color:lightgreen;
      font-size:0.8em;
}
#article_top_image {
    width: 240px;    
}
#article_content{
    background-color:lightgreen;
    font-size:0.8em;
}
#article h2 {
    font-size: 140%;
    color:blue;
    padding-left:0px;;
}
#article_content img{
    padding-left:0px;
    margin-right:8px;
    margin-bottom:8px;
}

.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;
}
.articleType {
      font-size: 12px;
}
-->
</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>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><!-- end .sidebar1 --></p>
</div>
  <div class="content">
<table width="650" border="0" cellspacing="0" cellpadding="15">
    <tr>
      <td colspan="2"><h1 class="title">Anne-Marie Johnson</h1>
        <h2 class="mainHome">for Silver Lake Neighborhood Council<br>
      At-Large Representative </h2></td>
    </tr>
    <tr>
      <td width="298" align="left" valign="top"></h2>
        <h4 class="mainHome">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>
&nbsp;</ul></h4></td>
      <td width="292" align="left" valign="top" bgcolor="#cccc9a"><p><img src="_images/home_sl1.jpg" width="293" height="194"></p>
      <h3>Silver Lake. Maintaining the Charm:</h3>
      <p class="articleType"><span class="articleType">Being a second generation Los Angeleno is unique. Being a life long resident of Silver Lake is even more unique, if that’s even possible. I’ve seen the community go from a struggling hippie, blue collar, working class enclave, to being named one of Vanity Fairs most desirable Los Angeles neighborhoods. It is an ever evolving community.</span></span></p>
      <p class="articleType">But Silver Lake has seen its ups and downs.  What has remained a constant, is the charm and welcoming atmosphere of this terrific community.  But in order to keep the uniqueness of Silver Lake alive and well, we all have to be aware of the downside of our desirability. Density is becoming a real problem in Silver Lake. It takes a strong and committed Neighborhood Council to ensure that the needs of our residents are taken into consideration at all times. </span></span></p>
      <p class="articleType">For the last year as one of Silver Lakes’ At-Large representatives, I have placed the needs of our residents in first position. I’d like the opportunity to continue the honor of serving this neighborhood. </span></span></p>
      <p class="articleType">I need your support. </span></span></p>
      <p class="articleType">Sincerely,<br>
      Anne-Marie Johnson</p></td>
    </tr>
</table>
<h1 class="title">&nbsp;</h1>
<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
Comment
Question by:Revolution9
  • 5
  • 3
  • 2
10 Comments
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 1000 total points
ID: 38424860
This should do it (suggestion: put code in code block in next post)
<!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;
text-align: left;
}
.mainHome{
align
      font-family: Numans, Arial, Helvetica, sans-serif;
      text-align: left;
}
.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 {
position: relative;
      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 {
      position: absolute;
      top: 0;
      left: 0;
      bottom:0;
      width: 300px;
      background: #669999;
      padding-bottom: 10px;
      padding-top: 15px;
      padding-left: 10px;
}
.content {
      padding: 10px 0;
      width: 686px;
      float: right;
      background-color: #f7f4ff;
      text-align: center;
}

.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;
}
#article {
      width: 275px;
      float: right;
      margin-right:12px;
      background-color:lightgreen;
      font-size:0.8em;
}
#article_top_image {
    width: 240px;    
}
#article_content{
    background-color:lightgreen;
    font-size:0.8em;
}
#article h2 {
    font-size: 140%;
    color:blue;
    padding-left:0px;;
}
#article_content img{
    padding-left:0px;
    margin-right:8px;
    margin-bottom:8px;
}

.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;
}
.articleType {
      font-size: 12px;
}
-->
</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&amp;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="https://maps.google.com/maps?f=q&amp;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
    </h4>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><!-- end .sidebar1 --></p>
</div>
  <div class="content">
<table width="650" border="0" cellspacing="0" cellpadding="15">
    <tr>
      <td colspan="2"><h1 class="title">Anne-Marie Johnson</h1>
        <h2 class="mainHome">for Silver Lake Neighborhood Council<br>
      At-Large Representative </h2></td>
    </tr>
    <tr>
      <td width="298" align="left" valign="top"></h2>
        <h4 class="mainHome">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>
&nbsp;</ul></h4></td>
      <td width="292" align="left" valign="top" bgcolor="#cccc9a"><p><img src="_images/home_sl1.jpg" width="293" height="194"></p>
      <h3>Silver Lake. Maintaining the Charm:</h3>
      <p class="articleType"><span class="articleType">Being a second generation Los Angeleno is unique. Being a life long resident of Silver Lake is even more unique, if that’s even possible. I’ve seen the community go from a struggling hippie, blue collar, working class enclave, to being named one of Vanity Fairs most desirable Los Angeles neighborhoods. It is an ever evolving community.</span></span></p>
      <p class="articleType">But Silver Lake has seen its ups and downs.  What has remained a constant, is the charm and welcoming atmosphere of this terrific community.  But in order to keep the uniqueness of Silver Lake alive and well, we all have to be aware of the downside of our desirability. Density is becoming a real problem in Silver Lake. It takes a strong and committed Neighborhood Council to ensure that the needs of our residents are taken into consideration at all times. </span></span></p>
      <p class="articleType">For the last year as one of Silver Lakes’ At-Large representatives, I have placed the needs of our residents in first position. I’d like the opportunity to continue the honor of serving this neighborhood. </span></span></p>
      <p class="articleType">I need your support. </span></span></p>
      <p class="articleType">Sincerely,<br>
      Anne-Marie Johnson</p></td>
    </tr>
</table>
<h1 class="title">&nbsp;</h1>
<!-- end .container --></div>
<div class="footer">
  <p class="footertype">©2012 Anne-Marie Johnson</p>
    <!-- end .footer --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html> 

Open in new window

Explanation to follow
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38424862
Your footer was inside your content div so it was constrained by that - just required a move of the </div> for content above the footer

The menu was not stretching because div's don't. There are two ways to sort this
1. Javascript - set the sidebar div height to the same height as the content div
2. Position the sidebar absolutely relative to the container and set top and bottom values to 0. This means making container relative and making content float right instead of left.

That's pretty much all there is to it.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 1000 total points
ID: 38424865
Take the footer div and place it before the closing container div. You have it in the content div

I don't see anything specifying the height of the sidebar. In the css for the container div add
overflow:auto
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38424866
You might also want to change your charset to get rid of those question marks - either that or get rid of the non-ascii chars in your content.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38424869
Was going to edit my comment since Julian had pointed out the footer problem.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38424871
Correction - just saw sidbar is over header - two ways of solving this
1. CSS below - make sidebar top fixed height to account for header
.sidebar1 {
      position: absolute;
      top: 342px;
      left: 0;
      bottom:0;
      width: 300px;
      background: #669999;
      padding-bottom: 10px;
      padding-top: 15px;
      padding-left: 10px;
}

Open in new window

2. Wrap sidbar and content in <div> and give the div position relative style. (but then don't make above change obviously).
0
 

Author Comment

by:Revolution9
ID: 38424877
That did it Gary!  You rule!
0
 
LVL 58

Expert Comment

by:Gary
ID: 38424888
Errmm
Julian posted half the solution first.
Should have split the points, request attention from a mod.
0
 

Author Comment

by:Revolution9
ID: 38424898
My bad, so he did.  Apologies Julian.  Maybe a moderator can make it right?
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38424900
@Gary, thanks for the nod.
@Revolution9 did you look at the code I posted?
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

840 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