<div id="page"> <div id="info1"> </div> <div id="top"> <div id="top_content"> <div id="top_content_right"> <p> <select> </select> <img src="img/lang/pl.png" alt="Polska"> <img src="img/lang/cz.png" alt="Czechy"> <img src="img/lang/de.png" alt="Niemcy"> <img src="img/lang/gb.png" alt="Anglia"> <img src="img/lang/fr.png" alt="Francja"> <img src="img/lang/it.png" alt="Włochy"> <img src="img/lang/es.png" alt="Hiszpania"> </p> </div> </div> </div> <div id="search"> <div id="search_content"> <input type="text" size="60"> <select> </select> Szukanie zaawansowane </div> </div> <div id="info2"> </div> <div id="content"> </div> <div id="footer"> <div id="footer_content"> </div> </div> </div>
body { background-color: #fff; margin: 0; padding: 0; text-align: center; font: 11px "Tahoma", sans-serif; color: #444; } #info1 { background: url(img/bg_info.png) repeat-x; width: 100%; height: 20px; color: #da251c; text-align: right; padding-top: 2px; font-weight: bold; } #info1_content { width: 920px; border: 1px; border-style: solid; border-width: 1px; margin: auto; } #top { background: url(img/bg_top.png) repeat-x; margin: auto; width: 100%; height: 78px; } #top_content { width: 920px; height: 78px; margin: auto; border-style: solid; border-width: 1px; } #top_content_left { width: 430px; height: 78px; float: left; text-align: left; margin: 10px; } #top_content_right { width: 470px; height: 78px; float: left; margin-top: 10px; color: #39a7fe; } #top_1px { width: 920px; height: 1px; margin: auto; border-style: solid; border-width: 1px; } #top_1px_content { width: 920px; height: 1px; margin: auto; } #search { background: url(img/bg_search.png) repeat-x; width: 100%; height: 53px; } #search_content { width: 920px; height: 25px; border-style: solid; border-width: 1px; text-align: left; color: #000; margin: auto; padding-top: 4px; } #info2 { background-color: #f0f3f9; width: 100%; height: 25px; } #info2_content { width: 920px; height: 25px; border-style: solid; border-width: 1px; text-align: left; color: #000; margin: auto; padding-top: 4px; } #content { width: 920px; margin: auto; border-style: solid; border-width: 1px; } #content_left { width: 400px; float: left; overflow: hidden; position: relative; border-style: solid; border-width: 1px; } #content_right { width: 516px; float: left; background-color: #fff; border-style: solid; border-width: 1px; } #footer { background: url(img/bg_footer.png) repeat-x; width: 100%; height: 81px; } #footer_content { width: 920px; height: 25px; border-style: solid; border-width: 1px; text-align: right; color: #000; margin: auto; padding-top: 4px; }
1 Problem: Sekcja <div id="search"> w IE7 wygląda dobrze, w FF zamiast być wyśrodkowanym zaczyna się od momentu, gdzie kończy się <div id="top_content_right">. Chcę żeby wszystko w sekcji search było wyśrodkowane.
2 Problem: Główna treść strony zmienia się wysokościowo zgodnie z zapotrzebowaniem. W IE sekcja footer daje się tam gdzie ma, czyli na dole, w FF odrazy pod search. Chcę na samym dole zawsze - pod główną treścią.
Jakieś pomysły, rady?