allineare 2 div in altezza in base al contenuto tipo valign=top

**allin81** · 01-05-2015, 01:46

Ciao a tutti
sto cercando di allineare in alto 2 div presenti all'interno del div principale che li contiene.
Questi 2 div devono stare uno a destra e uno a sinistra ma devono allinearsi in alto in base a qualsiasi contenuto di testo che hanno al proprio interno.

Con le tabelle ho sempre usato valign=top, con i div che cosa posso usare?

Allego un'immagine per rendere meglio l'idea.
Ho aggiunto un bordo rosso per farvi vedere i 2 differenti div

Per vederla cliccare qui
http://postimg.org/image/69fuyl19b/

Grazie

**Meliupa** · 01-05-2015, 15:49

Ti consiglio la funzione each ti Jquery per poterli allineare in altezza, e così si adattano a qualsiasi contenuto in automatico

**allin81** · 02-05-2015, 01:05

non l'ho mai usata, farlo direttamente tramite css non posso?

**WottaFacca** · 04-05-2015, 09:08

Vuoi proprio che siano proprio come l'immagine o che siano separati?

**Mich_** · 04-05-2015, 10:17

Originariamente inviata da allin81

non l'ho mai usata, farlo direttamente tramite css non posso?

vertical-align, che io sappia, si applica agli oggetti di tipo inline, non a quelli di tipo block.

Dovresti usare i margini (settare solo il margine superiore e non quello inferiore), oppure il top e non il bottom (se usi i posizionamenti).

Di piu` e` difficile dire, dato che non vediamo il tuo codice.

NOTA:
valign e` un attributo HTML, deprecato (in quanto attributo di formattazione). Va sostituito con il corrispondente vertical-align dei CSS.
E ricorda che mescolare formattazione HTML e CSS e` sempre sconsigliabile (browser diversi interpretano diversamente eventuali incompatibilita`)

**WottaFacca** · 04-05-2015, 10:22

Questo è un esempio, simile allo screen che hai postato tu, ovviamente con dimensioni a caso, solo per farti vedere come verrebbe

Ti posto anche il codice, così vedi anche la grande struttura che c'è dietro l'esempio xD

codice:

<html>
<head>

<style>
    
    #blocco1{
        
        width: 150px;
        height: 200px;
        float: left;
        background: #fff;
        border: 1px solid #ff0000;
    
    }
    
    #blocco2{
    
        width: 150px;
        height: 100px;
        float: left;
        background: #fff;
        margin-left: -10px;
        margin-top: 10px;
        border: 1px solid #ff0000;
    
    }
</style>
</head>

<body>

<div id="blocco1">
</div>

<div id="blocco2">
</div>



</body>
</html>

**allin81** · 04-05-2015, 12:47

Ciao, eccomi

no, i bordi rossi servivano solo per rendere l'idea, per far capire che come li ho io non sono allineati.

Il tuo esempio anche non e' allineato in alto
In pratica sia la colonna di sinistra che quella di destra devono essere allineate in alto, a te quella di destra e' leggermente piu' in basso.

**WottaFacca** · 04-05-2015, 12:52

Originariamente inviata da allin81

Ciao, eccomi

no, i bordi rossi servivano solo per rendere l'idea, per far capire che come li ho io non sono allineati.

Il tuo esempio anche non e' allineato in alto
In pratica sia la colonna di sinistra che quella di destra devono essere allineate in alto, a te quella di destra e' leggermente piu' in basso.

è più bassa perchè nel css ho inserito "margin-top: 10px;" quindi è più in giù di 10px, idem per i bordi rossi, se non ti servono ti basta cancellare "border: 1px solid #ff0000;" e i bordi spariscono

Guarda il link e vedrai che adesso sono allineati

**allin81** · 04-05-2015, 19:42

ok, ci sto riuscendo, solo che ora ho un piccolo "problema"

sto facendo in modo che quando la risoluzione del monitor è minore di 600px tutto il contenuto del div di destra vada sotto a quello del div di sinistra e ci riesco, solo che ho bisogno di uno spazio (un br) in modo da non attaccare tutto.

Come potrei fare?
Questo e' il codice attuale

codice:

#mostra_offerte{
        width: 60%;
        height: auto !important;
        float: left;
        background: #fff;
        margin-top: 10px;
}

div#supplementi-riduzioni{
        width: 40%;
        height: auto !important;
        float: left;
        background: #fff;
        margin-left: -1px;
        margin-top: 10px;
}

@media (max-width: 600px) {
  div#supplementi-riduzioni {
    float: none;
    width:80%;
    margin-top: 50px;
 }
}

sto margin top che ho aggiunto non fa molto

**WottaFacca** · 05-05-2015, 08:44

Aggiungere un <br> nell'html è proprio il metodo più bruto, ma sicuramente funziona.

Comunque ti basterebbe mettere un margin-top maggiore, in modo che lo spazio sia maggiore

Discussione: allineare 2 div in altezza in base al contenuto tipo valign=top

Strumenti discussione

Ricerca discussione

Visualizza

allineare 2 div in altezza in base al contenuto tipo valign=top

Permessi di invio