Web Page Design Get Distorted in Desktop PC Monitor

Question

I am building my web application on my laptop but when I navigate the page on my desktop pc the layout of the div are distorted.

I think the solution is giving percentage instead of absolute numbers like 240px to height and width of divs.

What do you think ?

Do you have another recommendations ?

Thanks in advance.

What I've done is :

<div style="height:240px;width:240px"></div>

What I think I have to do is :

<div style="height:100%;width:90%"></div>

Answer 1

When using relative sizing 'px' rather than absolute 'pt', the browser approximates the size which can alter your layout depending on user settings for 'zoom' or text-size' levels, browser version etc.

If you absolutely size the layout div using points (pt), you should not see changes based on browser, screen resolution etc. Try

<div style="height:240pt;width:240pt"></div>

Great reference on relative vs absolute font management here

Answer 2

What do you mean by "distorted"? Did it get wrapped to the next line? That's the only way I can see there being any distortion.

If you want to keep fixed widths, you simply have to wrap something else around it that will enforce a width. For example, if you wanted 2 divs side-by-side:

<div style="width: 800px">
    <div style="width: 300px; float: left;"></div>
    <div style="width: 500px; float: left;"></div>
</div>

Since the outer element is 800px, and the inner elements don't exceed that, if the screen is smaller than 800px it will just have a horizontal scroll bar, and your divs should still happily be next to one another. Note that if you have anything like borders or padding set on any of the divs, that will add to the width (and height) of the element, so take that into account.

Answer 3

im just a beginner in using html, i used to create my html documents using a simple text editor and interpret/display it by the internet explorer, the problem occur when i opened it up to other web browser like mozilla firefox, safari, google chrome, and others…the result is the distortion of my html documents, the menu’s are overlapped to each other, the elements are misplaced. what should i do now to fixed these problems, does anyone here can help me, before i host it to web host provider. thank you.