Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Allineare due div inferiormente

    salve,
    ho due div nella stessa facciata con il primo con attributo float: left. (classico esempio menu/contenuto) e larghezza finita (200px).
    Il problema è che vorrei che si allineino inferiormente: cioè se termina il testo di uno, il box deve continuare finchè non termina l'altro, simulando l'effetto che si avrebbe utilizzando una tabella con due colonne ed una riga.
    In pratica accade, che se il box menu è piu' lungo del box contenuto, allora sulla destra si posiziona altra roba [piè di pagina] che invece dovrebbe stare sotto entrambi, se il contenuto è più lungo, invece, il testo dello stesso continua anche sotto il menu.
    Esiste un modo "pulito" per risolvere con i css oppure si deve utilizzare una tabella come layout ?

    ciau!
    - Atari

  2. #2
    Ciao sono Paologaz, per quanto ne so non esiste una dichiarazione dei css per fare quello che vuoi tu; però si può ovviare inserendo una piccola gif bicolore con il colore a sinistra della stessa larghezza della prima colonna diverso da quello a destra. La gif viene fatta ripetere verticalmente e il gioco è fatto (almeno credo ).
    Posto i codici che formano due colonne affiancate con intestazione e piè di pagina;
    questo il codice da inserire nei tag Head:

    <style type="text/css">
    /*<![CDATA[*/
    body {
    margin: 0;
    padding: 0;
    text-align: center; /* per IE5.x/Win */
    background:#EEE;
    color: #000;
    font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    #centrato {
    width:700px;
    margin:auto;
    text-align: left; /* per IE5.x/Win */
    }
    #corpo {
    width:700px;
    float:left;
    background: #FFF url(sfondo.2col.fisso.gif) left top repeat-y;
    }
    #colonna-1 {
    float:left;
    width:200px;
    background: transparent;
    color: #000;

    }
    #colonna-2 {
    float:left;
    width:500px;
    background: transparent;
    color: #000;
    }
    #intestazione {
    background: #666;
    color: #FFF;
    }
    #pie-di-pagina {
    background: #666;
    color: #fff;
    clear: left;
    }
    #intestazione, #colonna-1, #colonna-2, #pie-di-pagina {
    padding-top:0.5em;
    padding-bottom:0.5em;
    }
    div p {
    margin: 0;
    padding: 0.5em 1em;
    }
    </style>

    ...e questo il codice da inserire nel Body:

    <div id="centrato">

    <div id="intestazione">

    Lorem ipsum mea sale iisque laoreet ei. Decore aperiam blandit quo ei. Fastidii patrioque constituto sea ea, qui ad sumo erant veritus, debet everti est ad. Pri simul fastidii fabellas an. An option incorrupte mea, omnium numquam petentium ei pro. Per ex nostro audire percipitur, eos latine pericula intellegat ad.</p></div>
    <div id="corpo">
    <div id="colonna-1">


    Atqui numquam singulis his ne, an eius fugit velit vel. Ut vix nisl philosophia, his ex reque petentium interpretaris. Autem zzril invidunt eam ex. Eu malis error sed, erat omnesque an has. Vix et primis omnium, qui vidit debitis ea. No nec dico ubique mandamus, nec vide copiosae cu, est id postea adipisci. Ne cum dolore definiebas.</p>


    Stet invenire nam no. Quando nostro eligendi has an, labores vulputate id nam, sonet impedit platonem id sit. In his democritum eloquentiam, an sed everti voluptaria. Doctus persecuti vituperata cu mea. Quodsi vivendum interpretaris vix ne, salutandi expetenda omittantur ut nec, nec nusquam percipitur assueverit id. Id fabulas inciderint sea.</p>
    </div>
    <div id="colonna-2">



    Sint oblique maluisset duo ut. Ut eam ignota persius perpetua, quo id possim accusata oportere, timeam laboramus ius et. Habeo nostro electram ut sit, eum nisl reque te. Legimus tibique contentiones pri et, an ius facete tibique principes, dico dolorem contentiones pro ex.</p>


    Idque virtute periculis mea et, mea id atqui perfecto senserit, semper conceptam et sed. Sit malorum phaedrum disputationi an. No bonorum insolens sit, periculis consequat voluptatibus sit in. Per no affert nostrud ceteros, has id nonumy iracundia, erant disputando ne sea. Dictas antiopam reprimique at sit, velit doctus an quo, illud quidam in vel.</p>
    </div>
    </div>
    <div id="pie-di-pagina">

    Kasd omnium nec te. At rebum iracundia sea, ne soleat insolens tincidunt eum, virtute accumsan ius ne. Postea reformidans ut vis, qui elit singulis philosophia no, sed id malis veniam convenire. Et his inani eirmod integre. Ius impedit conceptam ex. At sanctus facilisi elaboraret vis, ius id inani admodum, ut scripta intellegat vis. Ad est justo congue neglegentur, mea ad alia deterruisset, per zzril vidisse ea.</p></div>
    </div>

    Provalo, ci sono anche le direttive con commento per IE.

    Ciao, Paologaz

  3. #3
    grazie, ho risolto!

    ciau!
    - Dadamax

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.