Every time I code something, it ends up looking ok with my computer and its resolutions, but everytime I check it with another resolution it looks like garbage! This doesn't seem to be a problem for most any other user and their profiles. Am I coding something wrong? For example, my profile: looks fine for me, but any resolution under 1336x768 cuts my profile in half.

In the case of your profile, it's because you are using absolute pixel measurements based on your own screen resolution. For example, you have written "left: 1245px;" for your wishlist element, which you've also given a width of 300px. The first rule means that it will be positioned 1245px from the left edge of the screen. Add on the 300px of width, and that means your element is actually getting cut off on most resolutions (because now it requires a total of 1545px width). This is in fact happening - the element with the wishlist id has a 300px width and is getting cut off, but it's not noticeable currently (because the link inside of it does not take up the full 300px width). You can, by the way, simply remove the width: 300px line from these elements because it doesn't affect anything in practice.

Here's an screen capture that illustrates what I mean. Your element (highlighted here in blue) is getting cut off on the right edge.

My own advice would be to avoid using absolute positioning (at least, in the way you're using it here) - But doing it properly requires a slightly deeper understanding of CSS. I'd be happy to explain a few things, though, if you have the time :)

im all ears if you have the time! (: thank you for your explanation!

Haha, I'm technically supposed to be working right now, but meh... no one's watching XD

Before we can get into putting everything together, there are some fundamental attributes to understand. I've found that the best way to understand these intuitively is by remembering that, in the beginning, HTML and CSS were meant for marking up documents - documents that had text, organized into sections, and images, maybe a chart or figure here and there. When you keep in mind that these languages have their roots in marking up text, a lot of these attributes make more sense. I'll explain.

1. display

The display attribute tells you how the element acts within the flow of the document. It most commonly takes the values of inline, inline-block, or block.

• inline means that the element is in line with the text. In fact, all words/text are inline elements. These elements don't have a fixed width - think about it, when you type a bit a text, it just takes up whatever width it takes up. Thus, if you set a width on an element that's display: inline, you will find that this width attribute gets completely ignored.

• block means that the element gets its own section of the page. Think of a block element like a chart or figure in a document. If you write multiple block elements, they'll each show up in their own row, as if there are line breaks in between them. Block elements, just like figures and charts in a paper, have a fixed width and height. They are 100% width by default, due to the idea that they should take up their own section of the page (so one would think there's no reason for them to be any other width). divs are block by default.

• inline-block means that the element has a fixed width and height, but should flow in line with the text. When you set an element's display to inline-block, you can also set a vertical-align attribute that specifies how it lines up with the text. For instance, vertical-align: top means that the top of the element lines up with the top of the text. vertical-align: baseline means that it will line up like an inline element (sitting on the same baseline as the text). Inline-block can be used to place elements side by side.

Here's an example of inline-block: http://codepen.io/cheryllium/pen/ygqeKy

It's interesting to note that because inline-block elements are inline, they are affected by properties on the parent that affect inline children, such as text-align. Try uncommenting line 10 in my example there (the text-align: center line) and notice how it causes the inline-block elements to center.

2. position

Okay, that was a lot, but let me try and go through one more important attribute: position. First off, everything by default is position: static, which we may also call "statically positioned", which means it gets positioned naturally according to its display attribute in the flow of the page. But there's some other values, with offsets denoted by left, right, top, bottom. These offsets mean different things however for each of these position values!

• position: fixed - This will always position the element relative to the window. It doesn't matter what the element's parent is, or if the parent is fixed or absolute or whatever. It will always be relative to the window - that's why it does not scroll with the rest of the page.

• position: relative - This will position the element relative to where it would be if it were statically positioned. Used with no offsets, it will be in the same place as if you didn't set the position on it. If you offset it, it gets shifted in that direction by a little bit. For instance, top: 5px means that the element will be shifted upwards 5px. However, the element will still "take up" the original space, not the new space, in the flow of the page!

• position: absolute - This will always position the element relative to the closest absolutely or relatively positioned parent. This may be best demonstrated with an example: http://codepen.io/cheryllium/pen/GrBobz

In this example, the parent (big white box) is positioned statically. First, let me direct your attention to child-two (the blue square). This child is positioned absolutely. You'll notice that it gets positioned relative to the body (the page itself) because its parent is static, and it will ignore static parents.

child-one (yellow square) in the meantime is position: relative with no offsets. So it shows up where it would otherwise - nestled happily inside of the parent. But it has a child called subchild (purple square) and subchild is position: absolute. Now, subchild ends up having its offsets relative to child-one, because child-one is its closest absolutely or relatively positioned parent.

Okay this was a LOT. What does this all have to do with your original question? The answer is, when you position: absolute everything on the page, you're basically saying "okay, this goes here, this goes there, and no one is allowed to move from where I tell you to be." That cannot be responsive because the positions, sizes, etc of things never changes. You set it absolutely and that's how it is.

The alternative is to understand how each element behaves in relationship to the elements around it. This is governed by things like display and position, and requires a bit of understanding of the page flow - but it's worth it, because then instead of saying "div one is 300px from the left, div two is 600px from the left" you can say "div one and div two should be side-by-side" and that rule will be followed no matter the screen size or resolution.

But yeah... this was a big intro. I also hit the character limit so had to reword some things... But please play around with my examples and let me know if you have any questions :) we can move on when you are ready, but there's no rush at all.