Element Positioning

[marie b.]

So, I redesigned my blog. All well and good ; it took about five minutes.

 

However, this one element is giving me issues. I want it positioned 10px from the bottom of the page with a 10px margin on top, but it ends up right underneath the top bar with the same properties (only reversed). It works perfectly well on other pages -- individual archives, etc -- but not on the index.

 

Here's the code for the element (the same code is used both on the pages on which it works and those on which it doesn't - only the class names are different).

 

My blog is on my profile if anyone wants to check it out and see what I mean.

 

>.bottom {
  width: 700px;
margin: 10px 0px 10px 0px;
padding: 10px;
text-align: left;
border: 1px solid #C05F97;
background-color: white;
}

 

The only difference between the layouts of each page is that I use a container element on the index and not on the others. I hope this isn't an issue, as the container is really "keeping everything in."

 

Here's the container CSS :

 

>.container {
width: 700px;
margin: 0px 5px 0px 0px;
padding: 0px;
}

[TCH-Don]

I believe you need to add an absolute to the bottom style

 

position: absolute;

bottom: 10px

[TweezerMan]

In your .bottom style, you need to add a 'clear: both;' to make the bar appear below your content:

>.bottom {
  width: 700px;
       margin: 10px 0px 10px 0px;
       padding: 10px;
       text-align: left;
       border: 1px solid #C05F97;
       background-color: white;
       clear: both;
}

[marie b.]

I tried that as the very first thing when I noticed that the bar was appearing at the top of the page, Don. : )

 

Thanks, David. Worked like a charm.

 

I'm being told that the layout looks completely whacked in IE -- the sidebar is pushed to the bottom and lies horizontally, as opposed to stacked vertically, plus some other issues -- but that seems to be a problem with the Javascript.

Edited September 8, 2005 by marie b.