CODEWITHSUNDEEP
htmlcssfirefox
Dan Hlavenka
Dan Hlavenka

Reputation: 3817

position:absolute in Firefox

I'm trying to put together a simple 2-column page with text on the left, and various logos and things on the right. At the very bottom of the right column, I need to place some text. A simple position: absolute; width: 250px; bottom: 0; seemed like all I needed. Here's the code I came up with, also hosted here:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
    margin: 0px;
    background-color: #eee;
}#content{
    background: white;
    width: 900px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}#text{
    padding-left: 8px;
    padding-right: 8px;
}.left{
    width: 634px;
    border-right: 2px solid black;
}.right{
    width: 250px;
    text-align: center;
    position: relative;
}.bottom{
    position: absolute;
    width: 250px;
    bottom: 0;
}
</style>
</head>
<body>
    <center>
        <div id="content">
            <div id="body">
                <table border=0>
                    <tr valign="top">
                        <td id="text" class="left">
                            Some text
                        </td><td class="right">
                            <center class="bottom">
                                Bottom
                            </center>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </center>
</body>
</html>

That very solution works in all browsers except Firefox. Firefox treats the element almost like it's set to position:fixed, locking it to the bottom of the screen, rather than the bottom of the element (which is typically off the bottom of the screen). I can't seem to find anyone else having this problem, which implies I'm doing something wrong. I've messed with this for hours, but the results have been unchanging. Any help would be much appreciated.

Upvotes: 1

Views: 583

Answers (3)

PhD
PhD

Reputation: 11334

If I understand it correctly - firefox is pretty much in sync with the specifications. You can see details about it here

Now to answer the question of "why" (others have responded to the how :). As per my understanding the specification doesn't state (re)computing the position on page scroll. That's pretty much implementation dependent IMO. If no relatively positioned parent exists for an absolutely positioned element, it's positioned with respect to the displayable viewport/window. So if you open Firebug, you'll find the element is bottom:0 from top of the firebug window. If you scroll it's value doesn't seem to be recomputed.

Things do get funny when you start positioning with respect to the window and you should know the repercussions (you probably stumbled on one of them :) It's better to wrap it in a parent div like @Rohit suggested or using floats like @thenewguy mentioned

Upvotes: 1

th3n3wguy
th3n3wguy

Reputation: 3737

You are making this more difficult than it needs to be. This answer is based upon your description, but I believe it should work for you. Also, I am going to do this based off of percentages for the internals because I don't believe in using pixels (dealing with mobile devices has steered me away from that). Here it goes:

body {
margin: 0 auto;
background-color: #eee;
}
#content {
background: white;
width: 900px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
#left{
width: 72%;
border-right: 2px solid black;
overflow: hidden;
}
#right{
width: 25%;
text-align: center;
float: right;
overflow: hidden;
}
#bottom{
float: right;
width: 25%;
}

You should put that above code into a stylesheet file and call it instead of just placing the code onto the webpage, but that is just semantics. Here is the HTML code for this stylesheet:

<html>
    <head>
    ... (do whatever you need to here, including the stylesheet call)
    </head>
    <body>
        <div id="content">
            <div id="left">
            ...(place your stuff that goes on the left here)
            </div>
            <div id="right">
            ...(place your stuff that goes on the right here)
            </div>
            <div id="bottom">
            ...(place your stuff that goes on the bottom right here)
            </div>
        </div>
    </body>
</html>

That should give you the basic layout. Now, remember that if the left side div is not the same height as the right side divs, then your vertical line that you are creating between the two sections will not go all the way down. Let me know how this works and I will see what I can do to help you further.

**Just for future reference, I tend to stay away from using tables for styling. They tend to get difficult to deal with once you get a webpage to be fairly complex. Divs and other elements tend to work much better.

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Use two divs for positioning. Like this

live demo

Code is 

    <!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
    margin: 0px;
    background-color: #eee;
}#content{
    background: white;
    width: 900px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}#text{
    padding-left: 8px;
    padding-right: 8px;
}.left{
    width: 634px;
    border-right: 2px solid black;
}.right{
    width: 250px;
    text-align: center;
  height:150px;
  background:red;
    position: relative;
}.bottom{
    position: absolute;
    width: 250px;
    bottom: 0;
  background:green;
}
</style>
</head>
<body>
    <center>
        <div id="content">
            <div id="body">
                <table border=0>
                    <tr valign="top">
                        <td id="text" class="left">
                            Some text
                        </td><td>
<div class="right">
                      <center class="bottom">
                                Bottom
                            </center>
                      </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </center>
</body>
</html>

Upvotes: 0

Related Questions