DIV positioning and aligning issue

Question

Hi All,

I am working on a template for a new website. I am having some trouble trying to get some containers to line up how I would like. I am trying to create a navigation bar out of several div's and then underneath this block have a body that contains several containers.

I am stuck at 1) making the nav bar automagically align into the middle and 2) make the body start under the nav bar.

 <div id="navBar">
<div class = "buttons" id="home">Home</div>
<div class = "buttons" id="calendar">Calendar</div>
<div class = "buttons" id="gallery">Gallery</div>
<div class = "buttons" id="current">Dragon Rydas</div>
<div class = "buttons" id="prospective">Future Rydas</div>
<div class = "buttons" id="fallen">Fallen Rydas</div>
<div class = "buttons" id="contact">Contact</div>
<div class = "buttons" id="affiliates" align="center">Affiliates</div>
</div>


<div id="body">
<div class="content" id="Home">A</div>
<div class="content" id="CRydas">B</div>
<div class="content" id="Contact">C</div>
</div>

and the relevant css I have for it is:

#navBar {
    float:left;
    width:auto;
    margin-left:auto;
    margin-right:auto;
    color: #09F;
    size: 18px;
    font-size: 18px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    right: auto;
    left: auto;
}

.buttons {
    float: left;
    padding: 5px;
    width:115px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size:18px;
    color: #0CF;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
}

Thanks for any help.

Answer 1

You need to apply this to .buttons and #navbar {

#navBar {
    float:left;
    width:auto;
       padding:0;
margin:0 auto;
    color: #09F;
    size: 18px;
    font-size: 18px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    right: auto;
    left: auto;
}

.buttons {
    float: left;
    padding: 5px;
    width:115px;
    padding:0;
margin:0 auto;
    text-align:center;
    font-size:18px;
    color: #0CF;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
}

but you should really be using unordered lists <ul> for navigation.

Answer 2

I usually use a global rule to center everything according the page's width..

Example:

global {

 margin-left: auto;
 margin-right: auto;
 width: "Enter your total width"; /* mandatory to be centered */
 padding: 0px;
  }

then jus use this around the entire html.. it'll center the nav bar and everything below it will be in the width you specified..

Answer 3

I'm not sure if I'm following but try removing the float: left; from #navBar and add 'clear:both;' to a #body {}.

Answer 4

Don't use DIVs for menus, use lists. This gives you simple semantic HTML without all the need for additional IDs and classes.

<div class='root'>
    <div class='menu'>
       <ul>
          <li><a href="...">Item</a></li>
      </ul>
    </div>
    ... your content ...
</div>

Then float your LIs

.menu li {
  float:left
}

and style the anchors:

.menu a {
   display:block;
   ... your styles ...
}

Then center the whole thing using a wrapper, "root" in this case:

.root {
    width:960px;
    margin-left:auto;
    margin-right:auto;
}