mostrare due div affiancati

[lordalbert]

Ciao,
sto provando a cercare di visualizzare due div affiancati, ma non riesco (e non capisco dove sia l'errore...)

riporto il codice che ho scritto:

div.pagina {
  height: 100%; 
  width: 100%;
  position: absolute;   
  overflow: hidden;
  background: blue;    
}

div.tabella {
  display: inline;
  width: 70%;
  background: lime;
}

div.form {
  display: inline;
  width: 30%;
  background: red;
}

<div class="pagina">
        <div class="tabella">
                     .... codice php che disegna una tabella con i dati del db ....
        </div>
        <div class="form">
                     ....   form html ......
        </div>
</div>

I problemi sono:

• Visualizzo prima il div "tabella" e sotto "form". Come fossero block e non inline.
• La larghezza del div tabella è 100% della pagina, non il 70%
• il div form continua ad avere sfondo bianco e non rosso

Quello che vorrei io è avere due blocchi, uno a sinistra con la tabella (larga il 70%) e a destra i form (larghi 30%). Affiancati.

Qualcuno saprebbe indicarmi dove sbaglio?

[Mich_]

Nel tuo codice dovresti fare:
1. aggiungere
width:100% agli oggetti body e html (altrimenti il 100% del .pagina non ha significato)

2. modificare la larghezza totale (30% + 70%, puo` fare un n. maggiore di 100% quando entrano in gioco gli arrotondamenti), quindi ti consiglio:
width: 30%
width: 69.9%
rispettivamente (o qualcosa di simile)

3. usare
float:left;
anziche` display:inline
(il display:inline impedisce poi di definire le larghezze)

[EliBelTI]

cambia il css in questo modo

.pagina {

height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
background-color: blue;

}


.tabella {

float:left;
width: 70%;
background-color: lime;

}


.form {

float:left;
width: 30%;
background-color: red;

}