How to not use the left: -50px and top: -20px

[travisco]

I am looking to get ride of the left: -50px and others as such. I cannot figure out how to do it. You can view what I want to accomplish here.

https://travisapotter-gmail.tinytake.com/sf/MzIxMDFfMjc4MzM5

On my computer it looks just fine but I know there is a better way to organize this CSS.

http://codepen.io/travisco/pen/azBPyj

Where am I going wrong? What can I do to not use those values to get the image I want. Thank you in advance for your knowledge and time.

[Paulie_D]

My first question is “Why are you moving things around using positioning in the first place?”

It’s not necessary, What you are trying to do can easily be constructed using more flexible layout methods.

http://learnlayout.com/

Also, you are massively overusing ID’s. Try using classes as necessary, it’s unwise to give every element an ID…it bloats your HTML, causes CSS specificity issues and is very inflexible. It also means that the IDs cannot be re-used.

In fact, given the nature of the apparent content, I would be very tempted just to use a table…or at the very least CSS tables.

[Author]

Posts