Top div not holding hieght, div not following normal flow

The top div has a set height at 20px the nested divs have a set hight of 15px but the top div changes its heigh to around 50 to 60px.  I'm trying to get the nested divs to line up from left to right and not on top of each other.  Should't the divs line up from left to right automaticly?  Not sure on what i'm doing wrong here?
Thank you for the help.
on to the code:

#TopLinks
{
width:644px;
height:20px;
font-size:15px;
border-bottom: solid 1px #a1af9b;
border-right: solid 1px #a1af9b;
background-color:#172455;
position:static;
}

#AboutUs
{
width:50px;
height:15px;
background-color:#be6900;
position:relative;
bottom:-3px;
border:solid 3px white;
z-index:auto;
}

#Products
{
width:50px;
height:15px;
background-color:#be6900;
position:relative;
top:-14px;
left:50px;
z-index:auto;
}

#Contact
{
width:50px;
height:15px;
background-color:#be6900;
position:relative;
top:-31px;
left:100px;
z-index:auto;
}

HTML
 <form id="Form1" method="post" runat="server">
            <div id="Contain">

                         
                  <div id="TopLinks">
                         <div id="AboutUs">
                         </div>
                         <div id="Products">
                         </div>
                         <div id="Contact">
                         </div>
                  </div>
                         

        </div>

thanks again,
jt
jbtippsAsked:
Who is Participating?
 
StormyWatersConnect With a Mentor Commented:
You shouldn't be using positioning  at all from what I understand of this problem. From what I see, you have three divs with a width of 50 and a height of 15, right?

.smallbox {
  border:1px solid green; /* for demonstration. */
  background-color:black; /* demonstration */
  color:white;            /* ditto */
  float:left;
  font-size:smaller;
  width:50px;
  height:15px;
  margin-left:15px; /* Get rid of this or change it for the spacing between the divs.*/
}

<div class="smallbox">Bing</div>
<div class="smallbox">Bong</div>
<div class="smallbox">Wibble</div>

However, the use of this depends entirely on the context of the page and elements in question. From my point of view, you're quite likely using entirely the wrong tag for the job, but without seeing a link or code I can't tell.
0
 
jbtippsAuthor Commented:
ooo crap, thats way easier, Thanks! It works just like I wanted it to.
Thanks again!
0
All Courses

From novice to tech pro — start learning today.