Bottom Margin of a Div

Unholy Prayer · February 13, 2007

Ok, I want my navigation bar on the left side to be touching the bottom of my page at all times, no matter what content is on the page next to it. My site consists of dynamic php database content and I have design tutorials that are very long and when I view them, the navbar doesn't touch the bottom of the page. How would I do this? This is my source:

<HTML>
<head>
<title>//M-Tech Development</title>
<link rel=stylesheet href="styles/default/mtech.css">
</head>
<body>
<div align="center" class="logostrip" height="120"><img src="styles/default/images/logo.gif"></div>
<div align="center" class="midbar" width="800" id="headlinks"><a href="index.php">INDEX</a> | <a href="support.php">SUPPORT</a> | <a href="forums/index.php">FORUMS</a> | <a href="staff.php">STAFF</a></div><div id="middle">

<div align="left"  id="nav">
          <div class="navtop">Main Navigation</div>
          <div class="navlink"><a href="index.php">Index</a></div>
          <div class="navlink"><a href="news/news.php">News Archives</a></div>
          <div class="navlink"><a href="support.php">Tech Support</a></div>
          <div class="navlink"><a href="feedback.php">Site Feedback</a></div>
          <div class="navtop">Tutorials</div>

<div class='navlink'><a href='viewprogram.php?id=1'>Adobe PhotoShop</a></div><div class='navlink'><a href='viewprogram.php?id=2'>The GIMP</a></div><div class='navlink'><a href='viewprogram.php?id=3'>PHP Programming</a></div><div class='navlink'><a href='viewprogram.php?id=4'>Cascading Style Shee</a></div><div class='navlink'><a href='viewprogram.php?id=5'>HTML Coding</a></div>           <div class="navtop">Services</div>
           <div class="navlink"><a href="hosting.php">Hosting</a></div>
           <div class="navlink"><a href="services/sitedesign.php">Site Design</a></div>
           <div class="navlink"><a href="services/installation.php">Script Installation</a></div>

           <div class="navtop">Downloads</div>
           <div class="navlink"><a href="downloads.php">Free Scripts</a></div>
           <div class="navlink"><a href="downloads/templates.php">Site Templates</a></div>
           <div class="navlink"><a href="downloads/resources.php">Program Resources</a></div>
           <div class="navtop">Community</div>
           <div class="navlink"><a href="irc.php">IRC Chat</a></div>

           <div class="navlink"><a href="forums/index.php">Discussion Forums</a></div>
           <div class="navlink"><a href="services/installation.php">Script Installation</a></div>
           <div class="navlink"><a href="affiliates.php">Affiliates</a></div>
          <div class='navlink' id='navbottom'><a href='http://i3.photobucket.com/albums/y82/Daredeviles/Buttons/sglogo.jpg'><img src='http://i3.photobucket.com/albums/y82/Daredeviles/Buttons/sglogo.jpg' width='88' height='31' alt='Storm Gaming'></a><a href='http://www.dev.mtechdev.com/portal/styles/default/images/bbu.gif'><img src='http://www.dev.mtechdev.com/portal/styles/default/images/bbu.gif' width='88' height='31' alt='bbUltimate.com'></a></div></div><div align='center' id='news' class='content'><p align='left'><b>Site Under Construction</b></p><br>
            <p align='left'>The site is still under construction.  If you are navigating through the site, don't expect all areas to be complete.</p><br>
            <p align='right'><b>Posted by Unholy Prayer on 2007-01-21.</b></div><div align='right' id='members'>

<div class='navtop'>Members Area</div>
<div class='navlink'><a href='login.php'>Login</a></div>
<div class='navlink'><a href='logout.php'>Logout</a></div>
<div class='navlink'><a href='login.php?act=password'>Lost Password</a></div>
<div class='navlink'><a href='faqs.php'>Why Register?</a></div>
<div id='poll'>
<div class='navtop'>Weekly Poll</div>
<div class='navlink'><p align='center'>Do you like our site template?</p><br>
<input type='radio'>Yes<br><br><input type='radio'>No<br><br><input type='submit' value='Vote Now'></div>

<div class='navtop'>Advertisement</div>
<div class='navlink'><script type="text/javascript"><!--
google_ad_client = "pub-1347884490353570";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as";
google_ad_type = "text_image";
//2007-02-12: mtech_website
google_ad_channel = "7842738859";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div></div>
</div></div></div><div align="center" id="copyright" class="midbar">
©2006-2007 //M-Tech Development, All Rights Reserved.
</div>

and this is my css:

body { background-color: #fff6f6;
       font-family: arial;
       font-size: 11px;
       color: #b30e0e;
       margin-top: 0px;
       margin-bottom: 0px;
       margin-left: 0px;
       margin-right: 0px;
}

#nav {
     float:left;
     width: 170px;
     margin-right :10px;
     padding: 0 10 0 0;
     margin-bottom: 0px;
}
  
#members {
     float:right;
     float: top;
     width: 170px;
     margin-left :10px;
     padding: 0 0 0 0;
     align: top;
}
  
#headlinks{
     float:left;
     width: 100%;
     margin: 0px;
     padding: 0 0 0 0;
     height: 18px;
     vertical-align: center;
}

#tutorial{
     float: right;
     width: 50%;
     margin: 0px;
     vertical-align: center;
}

#copyright{
     float:left;
     width: 100%;
     margin: 0px;
     padding: 0 0 0 0;
     height: 18px;
     vertical-align: center;
}
  

#news{
  float:center;
width: 75%;
padding: 10 0 10 10;
        align: center;
}

.midbar { background-image: url(images/c_top.gif);
          text-align: center;
          font-family: arial;
          font-size: 10px;
          color: #FFFFFF;
          vertical-align: middle;
}

.midbar a:link, .midbar a:active, .midbar a:visited { color: #FFFFFF;
               text-decoration: none;
}

.midbar a:hover { color: #FFFFFF;
                  text-decoration: underline;
}

.navtop { background-color: #fdd9d9;
          font-family: arial;
          font-size: 10px;
          text-align: center;
          padding: 3px;
          vertical-align: middle;
          width: 150px;
          border-right: 1px solid #ea989a;
          border-left: 1px solid #ea989a;
          margin: 0px;
}

.navlink { background-color: #ffecec;
           text-align: right;
           color: #ea9898;
           font-family: arial;
           font-size: 10px;
           padding: 3px;
           vertical-align: middle;
           width: 150px;
           border-bottom: 1px solid #ea9898;
           border-right: 1px solid #ea989a;
           border-left: 1px solid #ea989a;
           margin-bottom: 0px;
           margin-top: 0px;
}

.navlink a:link, .navlink a:active, .navlink a:visited { color: #ea9898;
                         text-decoration: none;
}

.navlink a:hover { color: #ea9898;
                   text-decoration: none;
}

.table { background-color: #b30e0e;
            border: 1px solid #b30e0e;
} 

.content { background-color: #ffecec;
           text-align: left;
           color: #ea9898;
           font-family: arial;
           font-size: 10px;
           padding: 3px;
           vertical-align: middle;
           border: 1px solid #ea9898;
}

.content a:link, .content a:hover, .content a:visited, .content a:active { color: #b30e0e;
   text-decoration: none;

}

.sidebar { background-image: url(images/s_bar.gif);
               height: 100%;
               width: 15px;
               margin: 0px 0px 0px 0px;
}

.logostrip { background-image: url(images/logobg.gif);
                 text-align: center;
}

.inforow { background-color: #fff6f6;
               text-align: left;
               padding: 4px;
               color: #ea9898;
}

.inforow a:link, .inforow a:hover, .inforow a:visited, .inforow a:active { color: #ea9898; text-decoration: none;
}


.newshead { text-align: left;
                   color: #ea9898;
                   font-weight: bold;
                   font-family: arial;
                   font-size: 10px;
}

.newsmessage { text-align: left;
                         color: #ea9898;
                         font-weight: normal;
                         font-family: arial;
                         font-size: 10px;
}

.newsinfo { text-align: right;
                 color: #ea9898;
                 font-weight: bold;
                 font-family: arial;
                 font-size: 10px;


.navbottom{ background-color: #ffecec;
           text-align: center;
           color: #ea9898;
           font-family: arial;
           font-size: 10px;
           vertical-align: middle;
           width: 150px;
           border-bottom: 1px solid #ea9898;
           border-right: 1px solid #ea989a;
           margin-bottom: 0px;
           margin-top 0px;
           height: 100%;
}

.navbottom a:link, .navbottom a:active, .navbottom a:visited { color: #ea9898;
                         text-decoration: none;
}

Thanks in advance.

ToonMariner · February 14, 2007

WOW DIV overload there...

Why not use a nice unordered list for teh navigation -after all it is just a LIST of links.

to get this to be '100%' high the approach that will work cross browser is (been mentioned a lot lately') the faux column method.

Unholy Prayer · February 14, 2007

Hmm... not sure what you mean by faux column method. Please explain.

cmgmyr · February 15, 2007

You should try position: absolute; bottom: 0; that should attach your div to the bottom of the page at all times.

Hint: to clean up your code a little bit you don't need all those divs on the nav links. you could:

1.

<a href="index.php" class="navlink">Index</a><br />

2. Have:

#nav a { background-color: #ffecec;
           text-align: right;
           color: #ea9898;
           font-family: arial;
           font-size: 10px;
           padding: 3px;
           vertical-align: middle;
           width: 150px;
           border-bottom: 1px solid #ea9898;
           border-right: 1px solid #ea989a;
           border-left: 1px solid #ea989a;
           margin-bottom: 0px;
           margin-top: 0px;
}

with

<a href="index.php">Index</a>

hope that helps!

-Chris

ToonMariner · February 15, 2007

Support for absolute positioning is patchy depedning on your dtd.

dbrimlow · February 16, 2007

Support for absolute positioning is patchy depending on your dtd.

And forget about IE 5.x (PC and Mac) and 5.5 pc.

Until my stats show under 1,000 monthly unique visits from these browsers, I stay away from absolute positioning.

The reality is that most people online are used to long scrolled content, these days.

In the '90s we used a left nav frame.

From 2001 to 2003, we got rid of the evil frames and limited our content to 600px from the window-top and have a "more -->" or a "continued -->" link to another page (this was way too "heavy" though.

Now we live with scrolling and add "back to top" every 400px or so.

There is a function - "position:fixed" - that does not work in various IEs. Many Microsoft haters, though, have waste.. um, I mean ... spent considerable amount of time and effort to get IE to emulate it with hacks and other creative IE jousting. If you Google position:fixed, you can wade through them and perhaps find one you are comfortable with.

For me, though ... I'm tired. I don't try to champion the good fight against IEs anymore. I just try to code carefully.

Unholy Prayer · February 17, 2007

You should try position: absolute; bottom: 0; that should attach your div to the bottom of the page at all times.

Hint: to clean up your code a little bit you don't need all those divs on the nav links. you could:

1.
<a href="index.php" class="navlink">Index</a><br />
2. Have:
#nav a { background-color: #ffecec;
           text-align: right;
           color: #ea9898;
           font-family: arial;
           font-size: 10px;
           padding: 3px;
           vertical-align: middle;
           width: 150px;
           border-bottom: 1px solid #ea9898;
           border-right: 1px solid #ea989a;
           border-left: 1px solid #ea989a;
           margin-bottom: 0px;
           margin-top: 0px;
}
with
<a href="index.php">Index</a>
hope that helps!

-Chris

Uh, that kind of made it worse with the position attribute. http://www.dev.mtechdev.com/portal/index.php

Unholy Prayer · February 21, 2007

I changed both of my navigation menus to lists but it's still not doing what I want it to. Can someone please help me with this?

dbrimlow · February 22, 2007

Oh man. This is a mess. No wonder it hasn't been working.

You need to immediately fix a few very simple code errors.

1. doctype,

2. close list elements

3. close html and body

4. if you can loose the frame.

First, you need to get out of using "quirks mode" and declare a proper doctype! Use transitional for now:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>//M-Tech Development</title>
<link rel=stylesheet href="styles/default/mtech.css">
</head>
<body>
<

Second, you need to use proper html structure.

That includes closing your list tags </li> ... example:

you have this:

<ul align='left'>
          <li class="navtop">Main Navigation
          <li class='navlink'><a href="index.php">Index</a>
          <li  class="navlink"><a href="news/news.php">News Archives</a>
          <li  class="navlink"><a href="support.php">Tech Support</a>
          <li  class="navlink"><a href="feedback.php">Site Feedback</a>
          <li class="navtop">Tutorials

change it to:

<ul align='left'>
          <li class="navtop">Main Navigation</li>
          <li class='navlink'><a href="index.php">Index</a></li>
          <li  class="navlink"><a href="news/news.php">News Archives</a></li>
          <li  class="navlink"><a href="support.php">Tech Support</a></li>
          <li  class="navlink"><a href="feedback.php">Site Feedback</a></li>
          <li class="navtop">Tutorials</li>
etc, ...
</ul>

Also, it is a good idea to get used to always using lower case tags (for when you transition to xhtml)

So your <HTML> should become <html>

Lastly, close your document tags!

</body> tag and </html> tag.

If you can, get rid of putting the google ads in a (GAK!) frame!

You may see an immediate difference once you fix these few items. You've been driving yourself nuts working on the css, but it wouldn't work right anyway so long as the actual code was bad.

Sign In

Bottom Margin of a Div

Recommended Posts

Unholy Prayer

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

Unholy Prayer

Link to comment

Share on other sites

cmgmyr

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Unholy Prayer

Link to comment

Share on other sites

Unholy Prayer

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information