Content Layout disorder

[davy_yg]

This is my web: masterlink

The content only looks good in 1280 x 800px, other than that it start being dislocated. I thought I already place the content inside a container which I located in the center no matter what the resolution is. The content suppose to follow the container, but this is not the case.

Rustoleum2.php

<div id="container">

<div id="logo"><img src="images/logo.gif"></div>

<div id="menu"><a href="index.php">Pengenalan Perusahaan</a>&nbsp;&nbsp;&nbsp;&nbsp;<font color="red"><b>Industrial Product</b></font>&nbsp;&nbsp;&nbsp;&nbsp;<a href="aerosol-produk.php">Aerosol Product</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="konsultasi-konsumen.php">Konsultasi Konsumen</a></div>

<img src="images/banner.gif">

<div id="sidenav2"><img src="images/sidenav2.jpg"></div>
</center>

<div id="sidenavtext2">
<b>EPOXY</b><br><br>

1)  <font color="orange">9100 SYSTEM DTM EPOXY MATIC <br><br>

     - Standard activator <br>
     - Immersion activator <br>
     - Low Temperature activator </font><br><br>

2)  <a href="Rustoleum2-2.php">C 9578 system Coal Tar Epoxy </a><br><br>

<b>URETHANE</b><br><br>

3)  <a href="Rustoleum2-3.php">9400 System High Gloss Polyester Urethane </a><br><br>

4)  <a href="Rustoleum2-4.php">4200 / 4300 System High Heat Coatings </a><br><br>

5)  <a href="Rustoleum2-5.php">1500 System Speed - Dry Alkyd </a><br><br>

6)  <a href="Rustoleum2-6.php">7000 System Cold Galvanizing Compaund </a><br><br>

7)  <a href="Rustoleum2-7.php">Glowmax Aerosol </a><br><br>

8)  <a href="Rustoleum2-8.php">Epoxy - Floor Coating </a><br>
     8100 System <br>
     8200 System <br>
     8300 System</div>

<div id="pic"><img src="images/pic1.jpg"></div>

<div id="content2">

<div id="title">9100 SYSTEM & V9100 SYSTEM DTM EPOXY MASTIC</div><br><br>

Versatile epoxy system is perfect for Direct-To-Metal (DTM), direct-to-tightly
adhered rust, concrete floors, pools and more.  A high solids, next generation
polyamine converted epoxy.<br><br>

*  Minimizes prep - Apply Direct-To-Metal and tightly adhered rust<br><br>

*  Self-priming, single coat provides service life equal to multiple coats of <br>
competitive epoxy<br><br>

*  Maximum corrosion protection<br><br>

*  Superior long-term solvent, chemical and abrasion resistence<br><br>

*  Outstanding impact resistence<br><br>

*  Convenient 1:1 mixing ratio of base and activator<br><br>

*  Versatile base formula - Works with all activators (Standard, Immersion, Low 
Temp or Fast Cure) at VOC < 340 g/l or < 250 g/l<br><br>

* USDA acceptable* and Agriculture Canada** approved<br><br>
</div>

<div id="content2-1"><b>STANDARD ACTIVATOR</b><br><br>

* For air and surface temperature of 50 - 100 F (10-38 C)<br><br>


<b>IMMERSION ACTIVATOR</b><br><br>

* For fresh or salt water immersion of steel or concrete where <br> 
   water temperature do not exceed 125 F (52 C) <br><br>

* Great for use in floor coating applications <br><br>

* Produces slightly lower gloss than standard activator <br><br>

* Not for use in potable water tanks <br><br>

</div>

<div id="content2-2">
<b>LOW TEMPERATURE ACTIVATOR </b><br><br>

* For air and surface temperatures of 40 - 60 F <br>
  (5 - 15 C) <br><br>


<b>FAST CURE ACTIVATOR </b><br><br>

* Faster cure to minimize downtime <br><br>

* Recoat in 4 hors at 70 F (21 C) and 50% RH <br><br>

* For air and surface temperature of 50-100 F <br>
  (10-38 C)<br><br>

* Produces slightly lower gloss than standard <br>
   activator <br><br>
</div>

<center>
<hr width=950px;>
<div id="logo"><img src="images/logo.gif"></div>

</center>

</div>

You can check the style.css

style.css

I wonder why in every page of the website, the content start dislocate outside of 1280 x 800 px resolution?

[pritaeas]

You may want to take a look at these examples.

[JorgeM]

hello,

for some reason, you continue to create new threads about the same issue. this is the third or fourth one. In previous threads i provided you with some sample code that at least centered your content and contained the text. I also suggested that you reconsider the way you are applying some CSS properties, specifically with the margins.

Aside from the code examples i prreviously provided, there were other suggestions with regard to cleaning up your code, specifically with deprecated elements, not conforming to XHTML, etc..

You may want to think about this carefully, otherwise you will most likely encounter issues and continue to struggle with getting your site to look consistent across different browsers.

[drjohn]

run it through http://validator.w3.org/

trace the errors it mentions about div tags not being closed. (using an editor like notepad++ will show you when divs etc are not closed by color-coding things the wrong way)

Oh, and it's broken at all viewport sizes I played with.

[davy_yg]

http://www.masterlink.co.id/konsultasi-konsumen.php I have tried to validate it to: http://validator.w3.org/ . and fix the </div> tag.

Well, the text layout still dislocate whenever I change the resolution.

Does this layout: Click Here automatically center when I change the layout?

[davy_yg]

I think I get your point. Instead of centering the layout within the same size, it enlarging the layout within the same proportion. There is one problem though, what about the banner?

If I also enlarge the banner the pixel resolution with goes down? or maybe I just have to create a banner for the largest resolution then minimize it for lower screen resolution?

The irony is the font turns smaller for larger screen why then the banner turns larger on larger screen?

Is there other why simply centering the whole website in the center within a container. I try that earlier why it doesn't work. I mean the text layout still goes out of proportion?