CODEWITHSUNDEEP
csspositioning
Mike94
Mike94

Reputation: 67

absolute vs relative element positioning within a website

so I know pretty much how absolute/relative positioning works and have used it quite extensively in the past. Right now, I do have a website, where I need to position a graphical element so that it 'sticks' to the bottom, regardless of the website/screen dimensions.

I was able to do that for my own screen size, but whenever the height is different (larger), the elements (2 red images, as seen in the example) just 'float' in the middle of the site, instead of the bottom where it should be.

Here's the site

And the code:

    <div class='fimage'>
    </div>
    <div class='fimage2'>
    </div>

CSS

    .fimage{
        background-image: url(img/fimage.png);
        height: 236px;
        width: 50%;
        background-repeat: no-repeat;
        float: left;
}

.fimage2{
        background-image: url(img/fimage2.png);
        height: 236px;
        width: 50%;
        background-repeat: no-repeat;
        float: right;
}

Note that i have 2 separate images positioned left/right. The code is without any positioning now, because I wasn't able to figure it out correctly and always just messed up the whole layout.

Could you give me suggestions on how to position the elements, so they stay right at the bottom? Thanks.

Upvotes: 0

Views: 65

Answers (1)

j08691
j08691

Reputation: 207901

Kill the floats and position them absolutely, with the bottom and right (or left) set to 0.

.fimage {
    background-image: url(img/fimage.png);
    height: 236px;
    width: 50%;
    background-repeat: no-repeat;
    position:absolute;
    bottom:0;
    left:0;
}
.fimage2 {
    background-image: url(img/fimage2.png);
    height: 236px;
    width: 50%;
    background-repeat: no-repeat;
    position:absolute;
    bottom:0;
    right:0;
}

Upvotes: 2

Related Questions