Help with CSS/HTML

[Divvens]

I've always been interested in designing but never in coding it, I want to learn more than just the basics about css and I decided to code one of my recent design.

Everything was fine and I finished coding it, but when I passed it on to my friends there's a weird problem I'm facing. Different screen sizes is messing up the design and making it look weird...the first screenshot is of my screen where the design is perfect, the second screenshot is on my friends screen where the design is messed up.


I've attached the zip file with everything in it, if someone could help me out and tell me what exactly did I mess up

I'm new to it, I knew basic css before but not as much as to code a complete website, so if you want to give me some tips or guides please feel free to do so, and also explain me what I messed up with this particular design so that I get a basic knowledge of what to do to prevent it in my future works.

 

[Trent Gillespie]

You used absolute positioning, which will change with different screen resolutions. You need to use either floats or position:relative. I fixed your design using both techniques.

 

[Divvens]

You used absolute positioning, which will change with different screen resolutions. You need to use either floats or position:relative. I fixed your design using both techniques.

Thanks a lot Trent, so I should avoid using absolute positioning right?

There's one minor problem, somehow the nav bar doesn't work as links anymore (not clickable), but apart from that every problem I had before seems to be sorted out, thanks a lot!

 

[Divvens]

Nevermine!

"z-index:9999;"

Solved the problem, thanks alot Trent ^^

 

[Trent Gillespie]

Yes. When using absolute or relative positioning, you have the ability to overlap divs. The z-index property allows you to bring certain divs to the top.

Floating a div, on the other hand, does not allow you to overlap, and ignores the z-index property.

 

[Trent Gillespie]

Also, I wanted to comment, you have an excess of div containers. Example

<div id="navigation">
<div class="navigation_links">
content
</div>
</div>

You can combine them into one <div id="navigation" class="container"> or just move all of your css style vars into the id and forgo the class. On a small site it isn't a big complexity, but isn't needed either.