I been playing with for hours. I have a div container with a horizontal text nav inside that i want to fall to the very bottom of the container div. I have trying everything and I just cant seem to get the same consistency in different browsers. Any suggestions?

<div id="top_nav">
    <ul>
      <li class="first"><a href="#">Corporate</a></li>
      <li><a href="#">Social</a></li>
      <li><a href="#">BBQ</a></li>
      <li><a href="#">Wedding</a></li>
      <li><a href="#">Dessert</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Testimonials</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>

div#top_nav {
margin:0;
padding:0;
font-size:9px;
text-align:center;
background-image: url(../images/header_bg.gif);
background-repeat: no-repeat;
height: 30px;
width: 100%;
}
div#top_nav ul {
margin:0;
list-style: none;
padding-right: 1em;
padding-left: 1em;
}
div#top_nav li {
 display: inline;
 margin: 0;
 padding: 0 0.2em 0 0.5em;
 background: url(../images/top_nav_divider.gif) left center no-repeat;
}
div#top_nav a {
 margin-left: 3px; /* Width of the graphic */
 color:#666633;
 text-decoration:none;
}
div#top_nav a:hover {
text-decoration:underline;
}
div#top_nav .first {
 padding-left: 0;
 background: none;
}
div#top_nav .first a {
 margin-left: 0;
}

Hi,
I tried to push the text to the bottom vertically and that didn't work. The only thing that really worked was putting a break right before the word Corporate, but I have been taught that this is not the correct way to push text down or to give white (empty space). Can you post the page so we have access to the gifs you are calling in through CSS?

thanks Sandy. here is the link.

http://clientdownloadarea.com/ktc/index_bak.html

I added a break but it still doesn't fall to the very bottom on the div container. I can't believe how something so simple is giving me this much trouble. haha

Hi Matt,

When I added the break before the word Corporate this is what I saw on browsershots.org:

http://browsershots.org/http://www.s...navbottom.html

Everything looks good except Safari 3.1 - which is surprising as it is the newest.

Sandy K

That is a fantastic web resource. I didn't know anything like that existed. Unfortunately I need a solution that works on Safari also.

Just tested my link on Safari 3.1 with the break tag before Corporate and it seems to works fine. but still not a CSS solution to the problem.

1 - validate your code. You appear to have an extra closing </div> - at least that's what the validator thinks.

2- Your #container is not currently containing any of the elements inside it. This happens when you neglect to CLEAR YOUR FLOATS, as you must do. So, clear your floats so the #container will actually wrap around everything else as intended.

3- Set your #container to position:relative, then you can position the horizontal navigation to the bottom of container by using the bottom property.