DevProTalk - CSS i Firefox - Problem sa height

DevProTalk (http://www.devprotalk.com/index.php)

- (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)

- - CSS i Firefox - Problem sa height (http://www.devprotalk.com/showthread.php?t=2694)

CSS i Firefox - Problem sa height

Pozdrav,
Pretpostavljam da je ovo cest problem, ali ja sam pregledao ogroman broj nekih CSS tutorijala i sajtova za ovaj problem ali nisam nasao rjesenje da se wrapper div ili container razvuce po visini u zavisnosti od sadrzaja

Kôd:

<html>

<head>

<title>Welcome {$username} - Home</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body background="images/bg.jpg">

<div id="wrapper">

        <div id="header">

<img src="images/logo2.jpg" width="766" height="250" alt="Members area" />

<div id="navcontainer">

<div id="box"><a href="index.php">HOME</a></div>

{foreach from=$secs item=sec}

<div id="box"><a href="index.php?section={$sec.secid}">{$sec.name}</a></div>

{/foreach}

</div>

</div>

<div id="container">

<div id="side-a">

  <div id="main_container">

     <div id="title">

        <div id="title_box">NEWS</div>

     </div>

<div id="inner_box">

{* Display news  *}

</div>

</div>



<div id="main_container">

<div id="title">

<div id="title_box">NEW PICTURES</div>

</div>

{* Display newest pictures  *}

</div>

</div>



<div id="main_container">

<div id="title">

<div id="title_box">PICTURES COMING TOMMOROW</div>

</div>

<div id="inner_box">

{* Display pictures coming tomorow  *}

</div>

</div>



</div>

                

<div id="side-b">

<div id="navcon_b">

<div id="title_b">

<div id="title_box">Top Gallery</div>

</div>

<div id="inner_box">

{* Display top rated or most viewed pictures  *}

</div>



</div>



<div id="footer">

<div id="title_box">NEW MOVIES</div>

</div>



<div id="movie">

{* Display new videos  *}<div id="side-a">

  <div id="main_container">

     <div id="title">

        <div id="title_box">NEWS</div>

     </div>

<div id="inner_box">

{* Display news  *}

{carma_news count=5 start=0 section="SeksCentrala.com - News"}</div>

</div>



<div id="main_container">

<div id="title">

<div id="title_box">NEW PICTURES</div>

</div>

{* Display newest pictures  *}

<div id="inner_box">{carma_newest count=3 tpl=newest_items2 type=gal section=17}</div>

</div>



<div id="main_container">

<div id="title">

<div id="title_box">PICTURES COMING TOMMOROW</div>

</div>

<div id="inner_box">

{* Display pictures coming tomorow  *}

{carma_upcoming count=3 tpl=upcoming_items2 type=gal section=17}</div>

</div>



</div>

                

<div id="side-b">

<div id="navcon_b">

<div id="title_b">

<div id="title_box">Top Gallery</div>

</div>

<div id="inner_box">

{* Display top rated or most viewed pictures  *}

</div>

</div>



</div>



<div id="footer">

<div id="title_box">NEW MOVIES</div>

</div>



<div id="movie">

{* Display new videos  *}

</div>





<div id="footer">

<div id="title_box"><a href="index.php?section=18">OLDER MOVIES</a></div>

</div>

<div style="clear:both;"> </div>

</div>



</div>

</div> 

</body>

</html>

Problem se javlja samo u firefox-u evo kako izgleda:
http://www.infomedia.ba/layout.jpg
Jednostavno nece da razvuce ovaj div po visini u zavisnosti od sadrzaja, toliko sam opcija isprobao pa pretpostavljam da je css poprilicno zabrljan.... :1027:

http://www.infomedia.ba/style.css

A da maknes height: 100% sa #containter i/ili #wrapper (probaj sa web developer ekstenzijom da vidis koji od njih ostaje na fiksnoj visini, ovako me mrzi da "provaljujem")? Ja nikad nisam nista dobro dobio kad sam stavljao height: 100% :)

Ili te neki float zeza...

Probaj sa

Kôd:

html, body{ height:100%; }

To obično natera elemente da budu 100% po visini, mada ne znam da li si to već uradio.

zameni height:100% na #wrapper-u sa min-height:100%;
a za explorer < IE7 zasebno napravi height:100% preko conditional comments

na pomoci uspio sam to da rijesim sa kombinacijom vasih rjesenja...
postavio sam ovo sto je Dragan rekao i sklonio iz wrappera i containera height tag..

Imam isti problem, ali nazalost ne mogu da ga resim. Citao sam masu tuorijala i jos uvek imam problem.

Ovako izgleda kod:

Kôd:

html, body  {

    margin: 0;

        padding: 0;

        background: #3B3B3B;

        height: 100%;

}



#page {

        width: 958px;

        margin: 0 auto;

        padding:0;

        min-height: 100%;

        background: white;

}



#left_content {

        float:left;

        width: 616px;

        margin:0;

        padding:0px 0px 0px 0px;

         background: white;



}



#right_content {

        float:right;

        width:342px;

        margin:0;

        padding:0px 0px 0px 0px;

          background: white; 





}



#first {

        width:423px;

        float:left;

        margin: 0px 0px 0px 0px;

        padding: 11px 11px 11px 11px;

          background: white; 



}





#third {

        width:160px;

        float:left;

        margin: 0;

        padding: 11px 11px 11px 0px;

        background: white;





}



#second {

        float:left;

        width: 160px;

        margin:0;

        padding: 11px 11px 11px 0px;

          background: white;



}



#forth {

        float:left;

        width: 160px;

        margin:0px 0px 0px 0px;

        padding: 11px 11px 11px 0px;

          background: white;         



}

i HTML

Kôd:



<div id="page">



 <div id="left_content">

    <div id="first"></div>

    <div id="second"></div>

 </div>



 <div id="right_content">

    <div id="third"></div>

    <div id="forth"></div>

 </div>



</div>

Stavio sam height=100% u body tagu i min-height u PAGE. Takodje, sam pokusao da dam min-height=100% svim ostalim divovima ali ni to ne radi.

Trenutno me ne brine IE, vec dobri stari Firefox.....

u cemu gresim...:(((

stavi clear:both; posle dva float div-a

Clear:both remeti strukturu floatera....ne vidim kako bi ovo moglo da pomogne. Mozda gresim.....ako mozes objasni malo u detalje....

Citat:

Originalno napisao conica (Napišite 34626)

stavi clear:both; posle dva float div-a

Problem resen....

uklonio sam divove left_content i right_content i ubacio sam clear:both (hvala conica) na kraju Page diva. Ovo zajedno sa height: 100% u body tagu i min-height: 100% u ostalim divovima je resilo moj problem....:1094: