Rectangle block wont go to bottom of page.

[wildguy2]

Hi, Im just trying to make a rectangular block to go at the bottom of my page underneath the text and images. There is a image on the left and one on the right of the page. Inbetween the images is the text. A heading, then a paragraph. like an introduction. At the bottom I want to put the rectangle right across from left to right.

But the rectangal goes to the top of the page and then the text positions itself underneath.
code is #my_rect {
background-color:#800040;
width:250px;
height:200px;
background-repeat:no-repeat;
background-position:bottom right;
}

Ok, the width and height isnt correct, just experiment with the pixel sizes still.
If anyone can help me.
Thanks.

[chryaner]

its will be easier if we could see the page and find you problem, please provide link to your site

[handcraftedweb]

If you used a float before the rectangle that's the problem. Floats are tricky, you need tell the rectangle that it goes below any floated elements. Try this:

#my_rect {
    clear:both; /*make it go under any previously floated elements*/
    background-color:#800040;
    width:250px;
    height:200px;
}

background-repeat: and background-position: don't do anything unless you've set a background image.

CSS positioning is simply difficult. Here's a good little intro to it.