http://londonlabs.co.uk/test/

I have a DIV that I would like to be 20px from the top, right and bottom edges of the page. It is the DIV on the right of this page:
http://londonlabs.co.uk/test/

At the moment it is cutting off any content that is off the page so to speak (do ctrl + a to highlight missing text).

This is my body CSS code:

body {
    background-image: url(images/bg-new.JPG);
    background-repeat: repeat;
    background-color: #00CCFF;
    background-attachment: fixed;
    margin: 0px;
    padding: 0px;
    height:100%;
}

This is the code for the DIV:

#websites {
    border: 1px solid #7F7F7F;
    width: 300px;
    padding: 1px 5px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #7F7F7F;
    line-height: 140%;
    letter-spacing: normal;
    text-align: left;
    vertical-align: top;
    position:absolute;
    right:20px;
    top:20px;
    bottom:20px;
    background-color: #FFFFFF;
}

Different things are happening in IE6 & FF1.5 but neither are displaying it as I would like.

If you resize your browser window and refresh the page the DIV changes size. Is there anyway to keep it 20px from the top, bottom and right even if the screen is resized and still keep the content in it visible?

Any ideas?

Thanks.

I would use position:relative rather than the absolute and would float that #websites div to the right with the 20px margin that you want it to have.

The column should stretch to fit the content in it, and that should push any divs below it down as it stretches vertically.

It might be simpler than that:

body {
padding: 20px;
}

See if you can work with that.

Originally Posted by ADAM Web Design

It might be simpler than that:

body {
padding: 20px;
}

See if you can work with that.

no joy mate

Originally Posted by LadynRed

I would use position:relative rather than the absolute and would float that #websites div to the right with the 20px margin that you want it to have.

The column should stretch to fit the content in it, and that should push any divs below it down as it stretches vertically.

Thats spot on.

Thanks.

I have another question relating to this.

I have a DIV that I would like to be scrollable.

It runs vertically from the top of the screen to the bottom.

I would like its height to be 100% of the browser window, if the content in the DIV is longer than the size of the browser window then I would like it to be scrollable.

I can get this to work if the DIV has a fixed height but not a percentage - is this possible?

http://londonlabs.co.uk/test/

You've got some errors in there. You have several of these:
<div class="strips" id="strips'>. You also have "id="websites" multiple times.
You can't do that, ID's MUST be unique. Classes are reusable ojn a page, ID's are not.

Its no wonder it's not working for you. Clean that up and then you might get somewhere.