man_of_the_oak Napisano Lipiec 10 Zgłoś Share Napisano Lipiec 10 Witam forumowiczów! Mam problem z teoretycznie prostą sprawą - ułożenie 2 divów obok siebie. Próbowałem ustawiać oba na float:left, wrzucając je do jednego containera i nadając mu clear:both - bez skutku. Może już po prostu przestaję kontaktować po 2 dniach siedzenia nad tym projektem >.<" Proszę więc o pomoc tutaj zgromadzonych. Przedstawię w wersji graficznej jak chciałbym, aby to wyglądało: http://i30.tinypic.com/32zjqbp.png niestety, póki co jedyne co udało mi się osiągnąć wygląda tak: http://i28.tinypic.com/160aceh.png W pierwszym z divów będzie znajdować się więcej treści niż w drugim, więc dodałem kolor dla tła containera. Oto kod strony: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Malchus - Oficjalna strona zespołu</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onload="MM_preloadImages('img/img_glow_18.png','img/img_glow_19.png','img/img_glow_20.png','img/img_glow_21.png','img/img_glow_22.png','img/img_glow_23.png','img/img_glow_24.png')"> <div id="container"> <div id="main"> <img src="img/img_02.png" width="51" height="251" /><img src="img/img_03.png" width="32" height="251" /><img src="img/img_04.png" width="53" height="251" /><img src="img/img_05.png" width="71" height="251" /><img src="img/img_06.png" width="88" height="251" /><img src="img/img_07.png" width="73" height="251" /><img src="img/img_08.png" width="57" height="251" /><img src="img/img_09.png" width="61" height="251" /><img src="img/img_10.png" width="73" height="251" /><img src="img/img_11.png" width="76" height="251" /><img src="img/img_12.png" width="66" height="251" /><img src="img/img_13.png" width="63" height="251" /><img src="img/img_14.png" width="48" height="251" /><img src="img/img_15.png" width="38" height="251" /><img src="img/img_17.png" width="83" height="49" /><a href="nowosci.php"><img src="img/img_18.png" alt="Nowości" name="nowosci" width="104" height="49" border="0" id="nowosci" onmouseover="MM_swapImage('nowosci','','img/img_glow_18.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="zespol.php"><img src="img/img_19.png" alt="Zespół" name="zespol" width="86" height="49" border="0" id="zespol" onmouseover="MM_swapImage('zespol','','img/img_glow_19.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="koncerty.php"><img src="img/img_20.png" alt="Koncerty" name="koncerty" width="95" height="49" border="0" id="koncerty" onmouseover="MM_swapImage('koncerty','','img/img_glow_20.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="media.php"><img src="img/img_21.png" alt="Media" name="media" width="99" height="49" border="0" id="media" onmouseover="MM_swapImage('media','','img/img_glow_21.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="linki.php"><img src="img/img_22.png" alt="Linki" name="linki" width="70" height="49" border="0" id="linki" onmouseover="MM_swapImage('linki','','img/img_glow_22.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="ksiega_gosci.php"><img src="img/img_23.png" alt="Księga gości" name="ksiega_gosci" width="137" height="49" border="0" id="ksiega_gosci" onmouseover="MM_swapImage('ksiega_gosci','','img/img_glow_23.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="kontakt.php"><img src="img/img_24.png" alt="Kontakt" name="kontakt" width="103" height="49" border="0" id="kontakt" onmouseover="MM_swapImage('kontakt','','img/img_glow_24.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="img/img_25.png" width="73" height="49" /></div> <div id="promo"> <a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_26.png" width="51" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_27.png" width="58" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_28.png" width="63" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_29.png" width="44" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_30.png" width="53" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_31.png" width="50" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_32.png" width="61" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_33.png" width="69" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_34.png" width="64" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_35.png" width="60" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_36.png" width="59" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_37.png" width="69" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_38.png" width="55" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_39.png" width="56" height="150" border="0" /></a><a href="http://www.chrzescijanskiegranie.pl/?pro=1088" target="_blank"><img src="img/img_40.png" width="38" height="150" border="0" /></a></div> <div id="tresc_full"> <div id="tresc_round"> <img src="img/img_41.png" width="51" height="21" /><img src="img/img_42.png" width="761" height="21" /><img src="img/img_43.png" width="38" height="21" /></div> <div id="container_2"> <div id="tresc"> <div id="title-img"><img src="img/nowosci_title.png" width="92" height="35" alt="Nowości" /></div> <br /> <br /> <br /> bla bla? hmm... quite possible <br /> <br /> <br /> <br /> fdfdfdfdfdfdfd~~~~~~~~~~~~~~~~~~~~~~~~~ </div> <div id="sidebar"> gasgsjafs </div> </div> <div id="tresc_round"> <img src="img/img_46.png" width="35" height="21" /><img src="img/img_47.png" width="768" height="21" /><img src="img/img_48.png" width="47" height="21" /></div> </div> <div id="footer"><br /><img src="img/img_51.png" width="13" height="28" /><a href="http://www.myspace.com/malchus777" target="_blank"><img src="img/img_52.png" alt="Myspace" width="108" height="28" border="0" /></a><img src="img/img_53.png" width="40" height="28" /><a href="http://www.youtube.com/radii777" target="_blank"><img src="img/img_54.png" alt="YouTube" width="75" height="28" border="0" /></a><img src="img/img_55.png" width="47" height="28" /><a href="http://nk.pl/profile/11994686" target="_blank"><img src="img/img_56.png" alt="nk.pl" width="40" height="28" border="0" /></a><img src="img/img_57.png" width="13" height="28" /></div> </div> </body> </html> oraz arkusz css: body,td,th { font-size: 12px; color: #999; font-family: Verdana, Tahoma, Arial, sans-serif; } body { background-color: #000; } #container { margin:0px auto; padding:0px; width: 850px; } #main { width: 850px; height: 300px; margin:0px auto; padding:0px; } #promo { position:static; top: 0px; } #tresc_round { position:static; top: 0px; clear:both; } #tresc { width: 600px; background-color:#0b0b0b; padding: 0px 10px; float:left; } #tresc_full { clear:both; } #title-img { width: 600px; text-align: left; border-bottom: 2px dotted; border-bottom-color: #999; } #footer { margin:0px auto; padding:0px; width: 336px; } #container_2 { width: 850px; background-color:#0b0b0b; } #sidebar { width: 230px; float:left; } Z góry dziękuję za pomoc! Cytuj Link do komentarza Udostępnij na innych stronach More sharing options...
man_of_the_oak Napisano Lipiec 10 Autor Zgłoś Share Napisano Lipiec 10 Nieważne, już sobie poradziłem Wystarczyło zmienić ułożenie diva, który miał być po prawej na float:right (no któż by pomyślał ) oraz dodać containerowi overflow:hidden. Cytuj Link do komentarza Udostępnij na innych stronach More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.