Hi everyone!I'm pulling my hair here and I hope someone can help me. I'm having difficulties with layout using CSS. It looks almost OK in IE but in Firefox it looks terrible. I'm trying to get the page to strech from an absolute position at the left hand side, all the way out to the right hand side of the window. In other words it's both absolute positioned and liquid (understand me?) Here is the link anyway and you can see for you self My WebpageHowever in firefox the divs ends upp underneith eachother instead of beside eachother. I've used float:left but it doesn't help. Maybe it has something to do with width but i don't know how to fix it.Here is the html
<body><div id="tojlogo"></div><div id="link_anv_on">Användare</div><div id="link_admin_off"><a href="#" class="linksbutton">Administratör</a></div><div id="link_rapport_off"><a href="#" class="linksbutton">Intressent</a></div><div id="wrapper"><div id="wrapper_top"> <div id="blad_top_v_horn"></div> <div id="blad_top_statisk"></div> <div id="flik_on_v"></div> <div id="flik_on"><a href="#" class="linksbutton">Tidkort</a></div> <div id="flik_on_h"></div> <div id="flik_off_v"></div> <div id="flik_off"><a href="#" class="linksbutton">Egna rapporter</a></div> <div id="flik_off_h"></div></div><div id="wrapper_middle"> <div id="wrapper_left"> <div id="blad_v_anv_aktiv"></div> </div> <div id="wrapper_main"> <br> <form name="form1" method="post" action=""> <table width="75%" height="217"> <tr> <th width="8%" height="100" > </td> <td width="92%" rowspan="5" valign="top" class="helg">sfghfdg</td> </tr> <tr> <td height="27" class="vit"> </td> </tr> <tr> <td height="32" class="vit"> </td> </tr> <tr> <td height="23" class="vit"> </td> </tr> <tr> <td height="23" class="vit"> </td> </tr> </table> <p> </p> <p> <textarea name="textarea"></textarea> <select> <option>svenska</option> <option>Engelska</option> </select> </p> </form> </div> </div><div id="wrapper_bottom"> <div id="blad_ned_v_horn"></div> </div> </div> </body>
And here is the css:
body { background:url(../bilder/bg.gif) repeat-x #2882A1; background-attatchment:fixed; scrollbar-face-color: #aacfe0; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #ffffff; } #informerlogo { background:url(../bilder/logo.gif) no-repeat; width:93px; height:35px; bottom:0px; right:0px; position:relative; float:right; left: 933px; }/*----------- Tojlogo med gubbe i bakgrunden --------*/#tojlogo { background:url(../bilder/logo_toj.gif) no-repeat; width:151px; height:315px; position:absolute; top:0px; left:0px;}/* ------ Vänsterlänkar -------*/#link_anv_on { position:absolute; top:153px; left:0px; width:122px; height:31px; z-index: 1; padding-top: 7px; padding-left: 25px; font-family: verdana,arial,san-serif; font-size:12px; font-weight:bold; color: #fff; background:url(../bilder/kn_anvandare_on.gif) no-repeat;}#link_anv_off { position:absolute; top:153px; left:0px; width:122px; height:31px; z-index: 1; background:url(../bilder/kn_anvandare_off.gif) no-repeat;}#link_admin_on{ position:absolute; top:187px; left:0px; width:122px; height:31px; z-index: 1; padding-top: 7px; padding-left: 25px; font-family: verdana,arial,san-serif; font-size:12px; font-weight:bold; color: #fff; background:url(../bilder/kn_admin_on.gif) no-repeat;}#link_admin_off { position:absolute; top:187px; left:0px; width:122px; height:31px; z-index: 1; padding-top: 7px; padding-left: 25px; font-family: verdana,arial,san-serif; font-size:12px; font-weight:bold; color: #003551; background:url(../bilder/kn_admin_off.gif) no-repeat;}#link_rapport_on { position:absolute; top:221px; left:0px; width:122px; height:31px; z-index: 1; padding-top: 7px; padding-left: 25px; font-family: verdana,arial,san-serif; font-size:12px; font-weight:bold; color: #fff; background:url(../bilder/kn_rapport_on.gif) no-repeat;}#link_rapport_off { position:absolute; top:221px; left:0px; width:122px; height:31px; z-index: 1; padding-top: 8px; padding-left: 25px; font-family: verdana,arial,san-serif; font-size:12px; font-weight:bold; color: #003551; background:url(../bilder/kn_rapport_off.gif) no-repeat;}/*---------"Bladet"-----------*//*---------Box som innehåller hela "bladet"-------*/#wrapper { position:absolute; top:57px; left:122px; z-index: 2; width:100%; }/*--------innehåller topdelen-----*/ #wrapper_top { height:42px; width:100%; background:url(../bilder/blad_top.gif) repeat-x; } #wrapperflikar{ height:46px; float:left; vertical-align:bottom; } #blad_top_v_horn { background:url(../bilder/blad_top_v_horn.gif) no-repeat; float:left; width:16px; height:46px; } #blad_top_statisk { background:url(../bilder/blad_top.gif) repeat-x; float:left; width:40px; height:46px; } #blad_top_dynamisk { background:url(../bilder/blad_top.gif) repeat-x; float:left; width:50%; height:46px; } #flik_on_v{ background:url(../bilder/flik_on_v.gif) no-repeat; float:left; width:36px; height:46px; } #flik_on{ background:url(../bilder/flik_on.gif) repeat-x; float:left; height:46px; padding-top:14px; } #flik_on_h{ background:url(../bilder/flik_on_h.gif) no-repeat; float:left; width:36px; height:46px; } #flik_off_v{ background:url(../bilder/flik_off_v.gif) no-repeat; float:left; width:36px; height:46px; } #flik_off{ background:url(../bilder/flik_off.gif) repeat-x; float:left; height:46px; padding-top:14px; } #flik_off_h{ background:url(../bilder/flik_off_h.gif) no-repeat; float:left; width:36px; height:46px; } #blad_top_h_horn { background:url(../bilder/blad_top_h_horn.gif) no-repeat; float:right; width:16px; height:46px; } /*---------Innehåller hela mittendelen under topdelen*/ #wrapper_middle { width:100%; height:100%; } /*---------Innehåller vänsterkanten på bladet som ligger i wrapper_middle------*/ #wrapper_left { width:16px; height:100%; background:url(../bilder/blad_v.gif) repeat-y; float:left; }/*---------*/ #blad_v_anv_aktiv { background:url(../bilder/blad_v_anv_aktiv.gif) no-repeat; width:16px; height:264px; } #blad_v { background:url(../bilder/blad_v.gif) repeat-y; width:16px; height:100px; }/*-------Innehåller tidkortet--------*/ #wrapper_main{ background-color:#E5F7FF; float:left; margin:0px; padding:20px; vertical-align:top; clear: right; height:100%; width:99%; } /*------Innehåller högerkanten på bladet--------*/ #wrapper_right { float:left; width:16px; } #blad_h { background:url(../bilder/blad_h.gif) repeat-y; width:16px; float:right; height:100% } #wrapper_bottom{ height:16px; width:100%; background:url(../bilder/blad_ned.gif) repeat-x top; } #blad_ned_v_horn { background:url(../bilder/blad_ned_v_horn.gif) no-repeat top; float:left; width:16px; height:16px; } #blad_ned { background:url(../bilder/blad_ned.gif) repeat-x top; float:left; height:16px; width:95%;} #blad_ned_h_horn { background:url(../bilder/blad_ned_h_horn.gif) no-repeat; float:right; width:16px; height:16px; }
I would be so grateful if someone could help me with this.Thank you!