Problema di allinamento liste

[ALonE]

Salve

ho un problema con gli allineamente di liste
Ho una serie di liste, con relativo titolo, che devono stare affiancate, solo che ho problemi quando il titolo è lungo o il loro numero eccede la larghezza dello spazio a disposizione e devono andare a capo... insomma si forma un bel pasticcio, cmq di seguito vi scrivo il codice così si capisce meglio.

<div id="ProductsList">
            
                <div>
                    <h3>Linea <span class="Title">Sottocategoria 00</span></h3>
                    <ul>
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 01[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 02[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 03[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 04[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 05[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 06[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 07[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 08[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 09[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 010[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 011[/url]
                        
                    [/list]
                </div>
                
                <div>
                    <h3>Linea <span class="Title">LAVELLI</span></h3>
                    <ul>
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 01[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 02[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 03[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 04[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 05[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 06[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 07[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 08[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 09[/url]
                        
                    [/list]
                </div>
                
                <div>
                    <h3>Linea <span class="Title">Sottocategoria 01</span></h3>
                    <ul>
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 11[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 12[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 13[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 14[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 15[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 16[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 17[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 18[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 19[/url]
                        
                    [/list]
                </div>
                
                <div>
                    <h3>Linea <span class="Title">LAVELLI</span></h3>
                    <ul>
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 11[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 12[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 13[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 14[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 15[/url]
                        
                    [/list]
                </div>
                
                <div>
                    <h3>Linea <span class="Title">Sottocategoria 02</span></h3>
                    <ul>
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 21[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 22[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 23[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 24[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 25[/url]
                        
                    [/list]
                </div>
                
                <div>
                    <h3>Linea <span class="Title">LAVELLI</span></h3>
                    <ul>
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 21[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 22[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 23[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 24[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 25[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 26[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 27[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 28[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 29[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 210[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 211[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 212[/url]
                        
                    [/list]
                </div>
                
                <div>
                    <h3>Linea <span class="Title">Sottocategoria 03</span></h3>
                    <ul>
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 31[/url]
                        
                    [/list]
                </div>
                
                <div>
                    <h3>Linea <span class="Title">LAVELLI</span></h3>
                    <ul>
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 31[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 32[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 33[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 34[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 35[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 36[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 37[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 38[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 39[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 310[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 311[/url]
                        
                        [*][url="prodotto_neutro.asp"]Prodotto 312[/url]
                        
                    [/list]
                </div>
                
            </div> 

E questo il css che controlla il tutto

#ProductsList{
    width:auto;
    overflow:visible;
    margin:0 auto;
    white-space:nowrap;
    margin-left:25px;
    margin-top:30px;
}
#ProductsList div{
    float:left;
    margin-right:25px;
    margin-bottom:10px;
    width:25%;
    height: 20em;/**/
}
#ProductsList h3{
    font-weight:normal;
    font-size:10px;
}
#ProductsList .Title{
    font-weight:normal;
    font-size:20px;
    margin-left:20px;
    text-transform:uppercase;
}
#ProductsList ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
    clear:both;
}
#ProductsList ul li{
    font-size:9px;
    text-transform:uppercase;
    color:#B2B2B2;
    font-weight:bold;
}
#ProductsList ul li a{
    color:#B2B2B2;
}
#ProductsList ul li a:hover{
    text-decoration:none;
    color:#FFFFFF;
} 

[ALonE]

Allego alcune immagini esplicative

sbagliato:

Giusto???

[Renyp]

ho copiato e incollato il codice, aperto la pagina con ie e firefox - monitor 15 pollici - e a me visualizza tutto come nella tua seconda immagine, cioè dovrebbe essere tutto ok...

[thomas_anderson]

Peccato che quello che è corretto, IE lo reputi sbagliato.
Devi tenere presente che lo spazio a sinistra degli elenchi varia a seconda dei browser: alcuni usano margin, altri padding.

se vuoi usare 'margin':

ul, ol {
  margin-left: 2.5em;
  padding-left: 0;
}

se vuoi usare 'padding':

ul, ol {
  margin-left: 0;
  padding-left: 2.5em;
}

questa è la soluzione cross-browser. per l'allineamento verticale, tutto dipende da cosa è stato impostato per il parent ('padding', ad. es.) oltre, ovviamente, a margini impostati per gli elenchi stessi.