Twitter Bootstrap Scaffolding Issues (Layout)

Question

I have several issues laying out a website UI using Twitter's Bootstrap grid.

First off, here is the jsFiddle for my UI mockup.

I've explored the UI layout using Firebug, and things just don't seem correct. I set up a centered div (not using offset*, but actually maintaining centeredness in page regardless of window size by utilizing my centeredDiv class that I defined) which contains all accordion and the white rectangle div where the content will go.

The accordion and the content div are span2 and span8 classes, respectively. So they add up to fill up the space of their parent div, a div of class span10.

The issues are as follows:

1. The bottom of the background for the accordion and the bottom of the white, content rectangle are not lining up.
2. The bottom yellow div containing the church information isn't lined up properly with the white content div.
3. The text within the bottom yellow div isn't centered horizontally. I need it to be.

I really appreciate the help!

Answer 1

JSfiddle for you see it in action
Issue 1 : Accordion background and white background are not lining up because you have set the wrong height for accordion , it has to be height:661px .

Issue2 : It can be resolved by modifying the way you have arranged columns. Use the footer inside the main row and after the content div.

<!--Menu and Content-->

<div class="row" id="rowEntirePage">
 <div class="span10 centeredDiv" id="divContentStage">
  <div class="row" id="rowContentStage"> 
  <!--Menu-->
   <div class="span2 accordion" id="menuAccordion"> 
    <!--MINISTRIES-->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseOne"> MINISTRIES </a> </div>
      <div id="collapseOne" class="accordion-body collapse in">
        <div class="accordion-inner">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">WORSHIP</a> </li>
            <li><a href="#">CHILDREN</a> </li>
            <li><a href="#">YOUTH</a> </li>
            <li><a href="#">WOMEN</a> </li>
            <li><a href="#">DISCIPLESHIP</a> </li>
            <li><a href="#">MEDIA/TECH</a> </li>
          </ul>
        </div>
      </div>
    </div>
    <!--About Us -->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> ABOUT US </a> </div>
    </div>
    <!--THE TEAM -->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> THE TEAM </a> </div>
    </div>
    <!--EVENTS -->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> EVENTS </a> </div>
    </div>
    <!--SMALL GROUPS-->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> SMALL GROUPS </a> </div>
    </div>
    <!--MEDIA CENTER-->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> MEDIA CENTER </a> </div>
    </div>
    <!--BLOG -->
    <div class="accordion-group">
      <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
                    href="#collapseTwo"> BLOG </a> </div>
    </div>
  </div>
  <!--Content-->
  <div class="span8" id="divContent"></div>
  <!--Contact Info-->
  <div id="rowContactInfo" class="span8">
    <div id="divContactInfo">
      <p id="paragraphContactInfo">Church Name / Address / Town, State Zip Code Phone # / <a>Email Us</a> <br>
        <a>Maps&amp; Directions</a> </p>
    </div>
  </div>
</div>

And specifying the following property to the contact div :

#rowContactInfo {
background: linear-gradient(#F4D987, #FFFFFF) repeat scroll 0 0 transparent;
color: #FF0000;
height: 75px;
margin: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
vertical-align: top;
}

Issue 3 : I dont see any issue there . can you show me a picture of how you want it .

Update: Issue 3 : Please write styles and format your footer list properly . As in current representation it is mere text .

Hint : If anything doesnt align when you resize , its probably because you have to write media queries for your custom styles the following way for different resolution :

@media (min-width: 768px) and (max-width: 979px) {


 }
 @media (max-width: 767px) {

    }
  @media (max-width: 480px) {

   }

Just put your custom styles for a particular section that doesnt look good in the required resolution