[HTML + CSS] Text Positioning

[~bk]

Hi guys,

Really need some help with coding. This is the first time I'm trying to code everything in Notepad. Used to use Dreamweaver before. I'm having problems with text positioning. Check the site here. The menu on top, and the little blurb about myself in the bottom, appears different on various screen sizes (ex: A 13.1 inch screen versus a 15.6 inch one). It's out of position on all screens. Is there a way to make it look like the same on all screens?

Could you look at the code and suggest any solutions? Thank you!

What I'm using to position the text:

div#bio {
        position: relative;
        height: 230px;
        width: 950px;
        left: 230px;
        top: 84px;
        text-align: justify;
        text-shadow: #000 0.1em 0.1em;
        color: #FFFFFF;

 

[~bk]

I think I've partially fixed the problem. The menu on the top seems fine on my 13 and 15 inch screens. However, I have this problem at the bottom now.

On 15 inch:

On 13 inch:

See how the last sentence is off on the 15 inch screen shot? It's way down than it's supposed to be.

 

[American Zombie]

You need to do something about the page width.

You should not have to scroll side to side on a main page of a site.

 

[~bk]

I think it may be due to the fact that the site width is 1200px. What resolution are you viewing it on?

I guess I might have to decrease the width.

 

[LordOfLA]

you should design for 1024x768

 

[Khayman]

get a 404