Re: Exhausting my limited CSS abilities

[Rob MacKay]

Obviously Ikthius is right there.

You are using padding to position the text – never ever ever ever ever ever ever (etc…) use padding or margins to position elements, it always renders wrong.

For example

#content {
background-image: url(../images/content.png);
background: #dee9e9;
border: none;
height: 526px;
width: 756px:
padding-top: 0px;
padding-left: 280px;
padding-right: 50px;
overflow: auto;
background-repeat: no-repeat;
}

Dont do that – What you should think about doing is keep your content div and create another div that comes after your "latest news" div. Float the latest news and the new div left, then put all your text content in the new div.

Have a look through your document and everytime you use margin or padding to physically move text or objects to a specific point in the page, remove and replace with

#myexampleitem {
width:100px
height:100px
position:relative;
left:100px;
top:100px;
}

The position attribute is how you should always position items.

If you set the position of your wrapper div to relative, any element you postion inside it will reference its position to the wrapper. If you dont give the wrapper a position, when you set the position to your elements they will be relative to your browser window, and not relative to the div they are contained in.

Positioning can be a little strange at first, but its the only way to place elements successfuly.