Prawy div przesuwający się w dół

0

Witam . Otóz mój problem polega na tym że prawy class div przesuwa mi się w ie 7,8 na doł (wyżej wersje nie sprawdzałem )
próbowałem już wiele : skracałem szerokości , usuwałem paddingi , galerie , zmieniałem float : i nic ... tutaj mam kody

 </head>

<body>

<div id="asa">

   
<div id="asa2">



   <div id="topp2">   
      
    <div  id="toplewa"  ></div>
     <div  id="topprawa"  >
      <div class="pic" >
     <div id="prawao">
      </div></div>
     </div>
     
     
                       
                                       
           
            </div>
                                          
     
</div>          
      
   <div  id="strona"  >
   <div  id="lewa"  >
   <h3>Menu</h3><br><br>
<ul id="nav">

      <li><a href="porady.html">głowna strona</a></li>
      <li><a href="klient.php">galeria</a></li>
      <li><a href="kafara2.html">oferta</a></li>
      <li><a href="kolor.html">kontakt</a></li>
      
   </ul>
   
   
   
   </div> 
   <div  id="prawa"  >
    <div  class="prawa1"  ><h3> W naszej ofercie <h3> 
    </div>
    <div class="prawa2">
   
   <div class="zdjecia_pokaz">
   <img src="p/1.jpg"> </a>   
   
   <img src="p/2.jpg " />
   <img src="p/3.jpg " />
   <img src="p/4.jpg"  />
   
   </div>
</ul>
  </div>
   
   </div> 
   </div>
    </div>
   
   
                                          </body> 
       

    * {
       margin: 0;
       padding: 0;
       }
       body {
       background-image:  url(tlo3.jpg);;
       font-family: arial ,Georgia, serif;
       
       font-size: 12px;
    }   
    .pic {   
          height:230px;
          background: url(kreski3.png) repeat-x top center;
          background-position: bottom ;    
          width:850px ;
          float: left;
          margin-left:-150px;
          display:block;
             }

          
          
             
       #asa {
       height: 230px;
       margin:auto;
       background-image:  url(.png);
     
       }
       #asa2 {
       width:980px ;
       margin:auto;
       height:230px;
       }
       
       #topp11 {
       height: 230px;
       background: url(w.png) no-repeat top right;
       z-index: 0;
       
       
    }
       #toplewa {
        height: 100px;
       width: 250px;
        background:url(logo2.png) no-repeat; margin:0;

          float:left;   
          border-bottom:4px solid #3dbbee;
       }
       #topprawa {
       height: 230px;
       width: 670px;
       float:right;
    background:url(ww.png) no-repeat;
    }
       

       

       
       #strona {   width: 980px;
             height: 500px;
       border-top:2px solid #3dbbee;
       margin:auto;
             
             }
             #lewa{
             margin-top :50px;
             width: 230px;
             height: 500px;
             float: left;
    border-right:2px solid #3dbbee;
             
             
             }
             
             #prawa{
                width: 670px;
                float: right;
                height: 500px;
           margin:auto;
             
             }
          .prawa1
          {   
             float: left;
             width: 350px;
             height: 500px;
             background: url(saw1.png);
                      border-left:17px solid #7b7b7b;
             }
          .prawa2
          
          {   background-color: #89b0f6;
             float: right;
             width: 303px;
             height: 492px;
                      border-bottom:px solid #89b0f6;

             }
          
          
             h3   {
          clear:both;
          padding-top:20px;
          text-align:left;
          font-size: 1.6em;
          margin-left:30px;
          }
             
             ul, ul li {
       display: block;
       list-style: none;
       margin: 0;
       padding: 0;
    }
          #nav   ul
    {list-style:none;
    margin-left:0;
    padding:0;
    float: left;

    }

    #nav   li
    {width:180px;
    margin:0px;
    padding:0;
    text-align:center;
    border:1px solid #3dbbee ;
    border-radius:3px;
    box-shadow: 3px 2px 7px 2px gray;  // 1 <--- Odległość Cienia
    2 <--- Wysokość Cienia
    3 <--- Rozmazanie Cienia
    4 <-- Wielkość Cienia
    red <--- Kolor Cieniu
    }


    #nav   li a{
       display:block;
    padding:5px 10px;
    height:100%;color:#FFF;
    text-decoration:none;
    border-top :1px solid #FFF;
    background:url(howerm.jpg) repeat 0 0;}




    #nav
    li a:hover,
    ,li a:focus,
    li a:active {background-position: -150px 0;}


       #nav a{background:url(howerm.jpg) repeat 0 0 ;}
    }
       
             h3   {
          clear:both;
          padding-top:20px;
          text-align:left;
          font-size: 1.6em;
          margin-left:135px;
          }
          
          
          
          
     
     
     
       

    }
    /*DIV GALERIA*/

    }
    #galeria .gora {
       background:url(img/top_cont.jpg) bottom left no-repeat;
       height:35px;
       width:100%;
       padding-left:9px;
       padding-right:9px;
    }
    #galeria .gora .autor, .autor a {
       font-family:Corbel, "Times New Roman", Times, serif;
       font-size:0.9em;
       letter-spacing:0.1em;
       color:#6d7075;
       padding-top:0px;
       position:relative;
    }
    /*NUMEROWANIE ZDJEĆ */
    #galeria .gora .pager {
       position:absolute;
       height:30px;
       right:10px;
       top:0px;
    }
    #galeria .gora .pager a {
       background:url(img/pager.jpg) top left no-repeat;
       height:0px;
       width:45px;
       margin-left:2px;
       padding-top:8px;
       text-align:center;
       font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size:0.9em;
       color:#959595;
       display:block;
       float:left;
       text-decoration:none;
    }
    #galeria .gora .pager a.activeSlide  {
       background:url(img/pagerh.jpg) top left no-repeat;
    }
    /* BOX ZE ZDJĘCIAMI */
    #galeria .zdjecia {
       background:url(img/_cont.jpg) top left repeat-y;
       width:100%;
       padding-left:9px;
       position:rrelative;
    }
    .zdjecia_pokaz img {
       height:450px;
       width:300px;
       margin-top: 50px;
    }
    /* TYTUŁY ZDJĘĆ */
    #galeria .zdjecia .info {
       height:20px;
       width:100%;
       font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size:1.05em;
       letter-spacing:0.36em;
       color:#454545;
       padding:15px;
       text-align:center;
    }
    /* PRZYCISKI <em>*/
    #galeria .prev {
       background:url(img/prev.jpg) top left no-repeat;
       height:41px;
       width:47px;
       position:absolute;
       left:-46px;
       top:175px;
    }
    #galeria .next {
       background:url(img/next.jpg) top left no-repeat;
       height:41px;
       width:47px;
       position:absolute;
       right:-46px;
       top:175px;
    }
    #galeria .prev:hover {
       background:url(img/prevh.jpg) top left no-repeat;
    }
    #galeria .next:hover {
       background:url(img/nexth.jpg) top left no-repeat;
    }
    #galeria .dol {
       background:url(img/bottom_cont.png) top left no-repeat;
       height:125px;
       width:100%;
       padding-top:35px;
       text-align:center;
       dfont-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size:0.8em;
       color:#767586;
 

a tu jest strona na serwerze http://mark.mojastrona.di8.pl/stroma2/imdex.html
Prosze o pomoc ...

0

Nie powinieneś bawić się w składanie strony bez używania narzędzi deweloperskich, wbudowanych we wszystkie nowe przeglądarki oprócz Firefoxa (tam ściągasz dodatek Firebug).

Wtedy w dwóch klikach widzisz, że:
user image
#strona - http://i.imgur.com/zvkaxGF.jpg
#lewa - http://i.imgur.com/GU0d91P.jpg
#prawa - http://i.imgur.com/DY5kDaT.jpg

czyli #lewa = 230+2 borderu, #prawa +670, razem daje 902px długości, kiedy kontener ma tylko 900px.

0

Strona jest tworzona w bluefishu, który zaznacza błędy.
Ale kontener przecież ma 980px, więc nie rozumiem.

       #strona {   width: 980px;
       height: 500px;
       border-top:2px solid #3dbbee;
       margin:auto;
        }
0

Może jeszcze bardziej tu uściśle problem. mam div który ma 980 px. o nazwie #strona podzielony na dwa #lewy #prawy

#strona {   width: 980px;
         height: 500px;
   border-top:2px solid #3dbbee; 
   margin:auto;
         
         }
         #lewa{
         margin-top :50px;
         width: 230px;
         height: 500px;
         float: left;
border-right:2px solid #3dbbee;
         
         
         }
         
         #prawa{
            width: 670px;
            float: right;
            height: 500px;
       margin:auto;

i to w tym prawym mam dwie klasy .prawy1 oraz .prawy2 jeden z szerokością 367px drugi 303px co razem daje 670px . powinno wystarczyć i chyba starcza bo div nie przeskakuje pod inny ale idzie w doł .Próbowałem go rozszerzać a classy zmniejszać nic, usunąłem padding tez nic , dalej ie sobie go obniża i to o wartośc co ciekawe bodajże 550px gdzie te divy mają 500px ciekawe ... Dla jasności w chrome , firefox , operze i mobilnych przeglądarkach chodzi wszystko ok .

0

przyczepiles "clear:both;" do

przez co uzywajac go w prawa jeden resetujesz ustawienia float; zdejmij to i ciesz sie jak dziecko:P</p>

0

Wielkie dzięki będę się cieszył jak dziecko. :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1