Hello everybody! In fact it is my first website and I have got some problems with bottom of the page. I check this html in two browsers - Internet Explorer and Mozilla Firefox. In the case of IE it looks more or less fine, but in MF doesn't look good. And, nevertheless, everything collapses when I lengthen the text - replace "Text" with "Tekst <div> Tekst <div> Tekst ...". Files of the page are also available in the attachment. Please help me fix it . HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Page</title> <style type="text/css"> <!-- @import url("css/style.css"); --> </style> <script type="text/javascript" language="JavaScript1.2" src="java\stm31.js"></script> </head> <body class="main_body"> <div id="tlo"> </div> <div id="glowna" align="center"> <!--- wysrodkowanie calosci strony ---> <div id="gora"> <div id="logo"> <img src="http://images40.fotosik.pl/121/9ed50a49145d1c5c.jpg"> </div> <div id="logo2"> <img src="http://images47.fotosik.pl/126/797f0f8ede178374.jpg"> </div> </div> <div id="srodek"> <div id="lewa"> <div id="menu"> <!--#include file="menu.html" --> </div> </div> <div id="prawa"> <div id="o_firmie"> <div id="o_firmie_txt"> <span class="font_o_firmie"> <img src="http://images49.fotosik.pl/125/6ccfd13999f6fcc0.gif"> <br> </span> <span class="font_o_firmie2"> Tekst. </span> </div> <div id="o_firmie_img"> <img src="http://images50.fotosik.pl/125/bcf3b1be31f29f97.jpg"> </div> </div> <div id="inf"> <div id="inf_handl" class="font_inf_handl"> <img src="http://images40.fotosik.pl/121/d17d843a631dbe2c.gif"> <br><br> Firma <strong>Jakastam</strong> <br> Ulica Jakastam <br> 11-111 Gdziestam <br><br> tel. (0-32) 111-11-11 <br> fax 23242343243 </div> <div id="inf_gosp" class="font_inf_gosp"> <img src="http://images47.fotosik.pl/126/da3103b3f550d6d6.gif"> <br> </div> </div> </div> </div> <!-- koniec div srodek --> </div> <!-- koniec div glowna --> <div id="dol" align="center"> <div id="stopka" class="font_stopka" align="right"> Na razie w stopce niczego nie ma. <br> <p> <a href="http://validator.w3.org/check?uri=referer"> <img style="border: 0pt none ; width: 88px; height: 31px;" src="http://images50.fotosik.pl/125/2e8beab34b5e998c.png" alt="Valid HTML 4.01 Strict"> </a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border: 0pt none ; width: 88px; height: 31px;" src="http://images46.fotosik.pl/125/f6ae447524b5e389.png" alt="Poprawny CSS!"> </a> </p> </div> </div> </body> </html> Code (markup): CSS: .main_body { margin-top: 18px; margin-bottom: 60px; background-color: #009300; } #tlo { width: 100%; height: 135px; background: #00008B; /* kolor gornego podtla */ position: absolute; /* absolute - wzgledna do main */ top: 18px; /* top taki sam jak w .main_body */ left: 0px; } #glowna { position: relative; } #gora { width: 902px; /* szerokosc calej gory */ height: 139px; border: 1px solid #000000; background-color: #80FF80; /* kolor tla pod logiem */ } #logo { float: left; padding-left: 2px; padding-top: 2px; } #logo2 { float: right; padding-right: 5px; padding-top: 5px; } #srodek { width: 902px; min-height: 310px; /* dobrac wartosc pod katem MF */ height: auto; clear: both; background-color: #00E800; border-left: 1px solid #004000; border-right: 1px solid #004000; border-bottom: 1px solid #004000; } #lewa { float: left; width: 180px; /* szerokosc lewej kolumny */ height: auto; } #menu { width: 180px; /* menu.width = lewa.width */ height: auto; padding-top: 20px; /* margines gorny menu */ padding-left: 10px; /* dodana opcja dla lewego marginesu */ padding-bottom: 20px; /* czy dziala jako PRZYNAJMNIEJ (preferred) czy jako DOKLADNIE ? */ } #prawa { float: right; width: 706px; /* szerokosc, pamietac, ze do prawej jest wyrownane 706px */ height: auto; overflow: auto; } #o_firmie { width: 706px; height: 137px; /* wysokosc "o firmie" 197 */ padding-top: 16px; /* margines gorny */ text-align: left; min-height: 183px; /* dodalem ze wzgledu na Mozille Firefoksa */ } #o_firmie_txt { float: left; } #o_firmie_img { float: right; padding-right: 21px; } #inf { padding-top: 10px; } #inf_handl { float: left; width: 50%; min-height: 211px; height: auto; } #inf_gosp { float: left; /* na lewo od sasiadujacego elementu !!! */ width: 50%; min-height: 211px; height: auto; } #dol { position: absolute; width: 902px; } #stopka { float: right; padding-left: 5px; padding-top: 5px; padding-right: 5px; } Code (markup): And this is structure of divs: tlo glowna --- gora --- --- logo --- --- logo2 --- srodek --- --- lewa --- --- --- menu --- --- prawa --- --- --- o_firmie --- --- --- inf --- --- --- --- inf_handl --- --- --- --- inf_gosp dol --- stopka Code (markup): By the way, why doesn't <!--#include file="menu.html" --> work? Greetings and thanks in advance!
Are you using a programing language like php or asp? If you're just using html it won't work because html is a presentation language, not a programming language
I was also surprised why there were <!-- and --> in that course of html which I read. I remember it is for comments. I don't run my site on any server but just in Internet Explorer and Mozilla Firefox off-line. I tried some different ways: 1. <?php include("menu.html"); ?> 2. <?php include 'menu.html'; ?> 3. <?php include('menu.html'); ?> but it looks no one works. I also tried to change file from menu.html to menu.php. But this include is a minor problem. At least it would work properly on-line when I'll upload it on the server or I'll simply paste the whole code, without using include. The major problem is how to correct CSS. I would be really greatful if you help me with this because I guess it is simple thing to correct. I spent some time on it and I still don't know what to do so that it would be properly shown by Internet Explorer and Mozilla Firefox. (I prefer that second browser but I know many people use IE ). Thanks very much in advance. And once more what each div is for: Greetings!