Altezza css che si ridimensiona in automatico in base al contenuto

likepassion

Altezza css che si ridimensiona in automatico in base al contenuto

Ciao a tutto, ho provato a fare un po' di google ed un po' di search ma non trovo la quaglia che mi risolve questo piccolo problemuccio...in pratica:

1.ho un body nero;

2.in questo body nero c'è un contenitore div con sfondo bianco;

3.dentro questo contenitore div ci sono 2 div che fanno da colonna sx e colonna dx, dove all'interno ci sono varie tabelle e tabelline.

quello che vorrei fare è che il contenitore div (quello indicato al punto 2) abbia un'altezza che si ridimensioni in automatico al contenuto...infatti ho provato ad impostare un'altezza fissa ma tutto ciò che strafora oltre quell'altezza finisce nel body nero, invece vorrei che il div arrivasse fino all'ultimo elemento in automatico....ho provato anche a non impostare nessuna altezza ma il div contenitore diventa di altezza 0 e manco si vede, e finisce tutto nel nero...

mi date una mano pls??? thanks!!!

laburno

Ciao likepassion :),
puoi postarci il codice html e il css che hai usato?

likepassion

certo!!

** CSS:**


/* ******************************************************************************************************************* */
/* Inizio IndexBody*/

div#MainBody {
    width:750px;
    height:550px;;
    overflow:visible;
    background-color:#FFFFFF;
    position:relative;
}


/* Inizio Colonna Sinistra */
div#MainBodyLeft{
    width:180px;
    height:500px;
    right:5px;
    top:0px;
    position:absolute;
    float:left;
    background-color:#CCCCCC;
    }
/* Fine Colonna Sinistra */


/* Inizio Colonna Destra */
div#MainBodyRight{
    width:550px;
    height:500px;
    left:5px;
    top:0px;
    position:absolute;
    float:right;
    }
    
.ForumList{background-color:#EAEAEA;}
    
.ForumList td{border-bottom:#FFFFFF 1px solid;}
/* Fine Colonna Destra */
/* ******************************************************************************************************************* */

/* Fine Indexbody */
/* ******************************************************************************************************************* */

```**HTML:**

<div id="MainBody">

    <!-- Inizio Colonna Sinistra -->
    <div id="MainBodyLeft">
    </div>
    <!-- Fine Colonna Sinistra -->
    

    <!-- Inizio Colonna Destra -->
    <div id="MainBodyRight">
    
        <table class="ForumList" border="0" cellpadding="0" cellspacing="0">
        <!-- Titolo Categoria -->
            <tr><td colspan="3" bgcolor="#FFCC00" align="center"><br />
              <a class="TitleCategory" href="#">titolo cat </a><br /></td>
            </tr>
            <tr><td colspan="3" >&nbsp;</td>
            </tr>
        <!-- Elenco Forum -->
            <tr>
                <td style="width:55px; height:50px;" align="center" valign="middle">&nbsp;</td>
                <td style="background-color:#F7F7F7; width:300px;" align="left">
                <a href="#" class="TitleTopic">topic</a><br />
                <span class="Verdana10Grey">desc</span><br />
                <span class="Verdana10GreyBoldItalic">args</span><br />
                </td>
              <td style="width:195px;" align="center" valign="middle">
                <span class="Verdana10Grey">data</span><br />
                <a href="#" class="Verdana10Orange">title</a><br />
                <a href="#" class="Verdana10Orange">user</a>&nbsp;<a href="#"></a>                    </td>
            </tr>
            <tr>
                <td style="width:55px; height:50px;" align="center" valign="middle">&nbsp;</td>
                <td style="background-color:#F7F7F7; width:300px;" align="left">
                <a href="#" class="TitleTopic">topic</a><br />
                <span class="Verdana10Grey">desc</span><br />
                <span class="Verdana10GreyBoldItalic">args</span><br />
                </td>
              <td style="width:195px;" align="center" valign="middle">
                <span class="Verdana10Grey">data</span><br />
                <a href="#" class="Verdana10Orange">title</a><br />
                <a href="#" class="Verdana10Orange">user</a>&nbsp;<a href="#"></a>                    </td>
            </tr>
            <tr>
                <td style="width:55px; height:50px;" align="center" valign="middle">&nbsp;</td>
                <td style="background-color:#F7F7F7; width:300px;" align="left">
                <a href="#" class="TitleTopic">topic</a><br />
                <span class="Verdana10Grey">desc</span><br />
                <span class="Verdana10GreyBoldItalic">args</span><br />
                </td>
              <td style="width:195px;" align="center" valign="middle">
                <span class="Verdana10Grey">data</span><br />
                <a href="#" class="Verdana10Orange">title</a><br />
                <a href="#" class="Verdana10Orange">user</a>&nbsp;<a href="#"></a>                    </td>
            </tr>
        </table>
        <br />
    
        
        
    </div>
    <!-- Fine Colonna  -->
    
</div>
<!-- Fine IndexBody -->

tiago

fai cosi a impostare l'altezza:


min-height:100px;
height:auto !important;
height:100px;

Fammi sapere,
Ciao

likepassion

Niente...purtroppo non funziona....vi faccio vedere cosa succede :

In pratica il contenitore div che contiene lo sfondo bianco dovrebbe scendere fino a coprire il div colonna sx (dove c'è la tabella) ed il div colonna dx (la colonna grigia) in modo che il div orizzontale con il lo sfondo con il cuore e quello dopo arancione del footer slittino in basso.

impostando nel css del contenitore bianco questi valori :

min-height:100px;
height:auto !important;
height:100px;
```ottengo questo risultato, cioè rimangono visibile solo per 100px e poi vengono coperti...

likepassion

risolto il problema, c'era un conflitto di attributi "position" che ho risolto ed ora è tutto perfetto! grazie lo stesso per il vostro prezioso aiuto!!

patrizia.lorenzini

Ciao, come hai risolto questo problema?
Grazie 1000