Solved

Can a DIV really be aligned to the bottom?

Posted on 2003-10-23
9
148 Views
Last Modified: 2010-04-09
Hello,

I tried an answer from a question in this forum, and I guess I have a different definition of the bottom.

Open this html page in a full-screen browser window:

<html>
      <head>
      <style type="text/css">
      <!--
      #container {
                                                       border-top: thin solid #CCC 1px;
                           color: #CCC;
                           position: normal;
                        bottom: 20px;
                 }

      #topleft   {
                        font-size: 80%;
                        float: left;
                }

      #botright  {
                        font-size: 80%;
                        float: right;
                }
      //-->
</style>
      </head>
      <body>
            <h1>header 1</h1>
            <p>test</p>
            <p>more testing</p>
            <p>thanks </p>

            <div id="container">
                  <div id="topleft">on the left</div>
                  <div id="botright">on the right</div>
            </div>
      </body>
</html>


and you'll see the DIV below the page content, but nowhere near what I'd call the bottom.

If you change the position to absolute in the "container", then refresh the page,  it goes to what I'd call the bottom of the page, but then, if you re-size the window so that it's so small that you can't even see the text in the "thanks" paragraph, the div text gets drawn over other content in the page, and looks terrible.

So my points are for someone who can provide me with a solution:

Get the div on what I consider the bottom, but make it handle re-sizing, really small windows, etc.

Thanks!

v
0
Comment
Question by:vlg
  • 4
  • 4
9 Comments
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9609792
It's at the bottom of the main content.

The more content yu add the further down it will be.

If you use absolute position it will be there all the time.

you could use javascript to move it where ya want it on resize, but IMHO i would and hope you have more content
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9610559
Hi,

is this what you want? (ie only version)

<script>
function init()
{
  x= document.body.offsetHeight - document.body.topMargin
  document.getElementById('container').style.pixelTop = x

}
</script>
     </head>
     <body onload='init()'; onresize='init()'>
          <h1>header 1</h1>
          <p>test</p>
          <p>more testing</p>
          <p>thanks </p>

          <div id="container"function init()
{
  x= document.body.offsetHeight - document.body.topMargin
  document.getElementById('container').style.pixelTop = x

}
</script>
     </head>
     <body onload='init()'; onresize='init()'>
          <h1>header 1</h1>
          <p>test</p>
          <p>more testing</p>
          <p>thanks </p>

          <div id="container" style="position:absolute;top:0">
               <div id="topleft">on the left</div>
               <div id="botright">on the right</div>
          </div>
     </body>
</html>


Vinny
0
 

Author Comment

by:vlg
ID: 9613619
Hi Vinny,

Thanks for trying, but your suggestion doesn't seem to work.  I tried my best to clean it up, and maybe I screwed something up, but I couldn't get it to do what I wanted.

v
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9613906
Hi v,

>>>  I couldn't get it to do what I wanted.

In what way?

>>I tried my best to clean it up, and maybe I screwed something up

mind posting it?

Vinny

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:vlg
ID: 9614109
This is what I tried, and the only flaw is that if you open it in a window that is too small to display all the content at once (i.e., you must scroll down to see, e.g., the "thanks" paragraph) the browser writes the footer over the displayed content.
IOW, the footer is always written in the visible part of the window, regardless.

<html>
<head>
     <style type="text/css">
     <!--
     #container {
                        border-top: thin solid #CCC 1px;
                       color: #CCC;
                       position: normal;
                       bottom: 20px;
                }

     #topleft   {
                    font-size: 80%;
                    float: left;
               }

     #botright  {
                    font-size: 80%;
                    float: right;
               }
     //-->
</style>
<script>
function init()
{
  x= document.body.offsetHeight - document.body.topMargin
  document.getElementById('container').style.pixelTop = x

}
</script>
     </head>
     <body onload='init()'; onresize='init()'>
          <h1>header 1</h1>
          <p>test</p>
          <p>more testing</p>
          <p>thanks </p>

          <div id="container" style="position:absolute;top:0">
               <div id="topleft">on the left</div>
               <div id="botright">on the right</div>
          </div>
     </body>
</html>

Was this a faithful attempt to implement your suggestion?
0
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 300 total points
ID: 9614290
Hi,

see how you like this:

function init()
{

   sHeight = document.body.scrollHeight;
   oHeight = document.body.offsetHeight;

   x =  (oHeight > sHeight) ? oHeight : sHeight;
  document.getElementById('container').style.pixelTop = x - document.body.topMargin;
}

Vinny
0
 

Author Comment

by:vlg
ID: 9614417
Hi Vinny,

It technically does what I asked for, so I'll give you the points because of your effort, but have you tried it?

Anyways, in case someone searches this in the archives, the answer is here:

http://scott.sauyet.name/CSS/Demo/FooterDemo.css
0
 

Author Comment

by:vlg
ID: 9614507
I just read my comment, and I don't like it's tone, so I wanted to add this:

Vinny, your effort and help were nothing short of terrific, and you deserved & earned the 'A' I gave you.

Also, I found the solution on the web through sheer blind dumb luck, on about page 14 of a Google Search...
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9614530
Hi v,

I admit twas my blindness.  Your original code was 'almost' there:

   #container {
        border-top: thin solid #CCC 1px;
        color: #CCC;
        position: absolute;
        bottom: 0;
     }

  <body>
          <h1>header 1</h1>
          <p>test</p>
          <p>more testing</p>
          <p>thanks </p>

          <div id="container">
               <div id="topleft">on the left</div>
               <div id="botright">on the right</div>
          </div>
     </body>

Vinny
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Bootstrap 3 website error 14 46
Javascript Hashmap output 8 46
Tags from access to excel 3 28
Download a website to hdd 2 50
Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now