Sostituire DIV a Tabella

**skini82** · 07-10-2011, 11:27

Buongiorno gente,
sto creando un nuovo sito internet e sto cercando di evitare le tabelle, facendo tutto con i DIV, ma inutile dire che sto impazzendo!

Praticamente quello che prima facevo facilmente con una tabella, ora non riesco a farlo con DIV+CSS e non riesco a capire cosa sbaglio, quindi provo a chiedere a voi di darmi un esempio lampante!

Il mio scopo è creare in sostanza due div affiancati orizzontalmente: uno avente il logo dell'azienda, a larghezza fissa (es. 100px). L'altro invece deve occupare il restante spazio della pagina (non posso mettere width: 100% perché altrimenti il div mi va a capo e occupa proprio tutta la pagina, dovrei fare qualcosa del tipo larghezzaschermo-100px).

Questo è il mio codice con tabella, dovrei ottenere lo stesso risultato con DIV+CSS:

codice:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top" width="128">[img]/images/logo.png[/img]</td>
    <td valign="top">
    <div id="navbar">
		
    </div>
</td>
  </tr>
</table>

Un appunto: non vorrei utilizzare i valori di display come table o table-cell perché a quanto pare, leggendo in rete, non supportati dai browser un po' datati (IE8 in primis).

Ho cercato in rete ma a parte che ho trovato molta confusione a riguardo, tante soluzioni proposte non funzionano a dovere (o magari sono io che non cerco le keywords corrette).
Se qualcuno mi sa dare qualche delucidazione, gli sarei grato!
Buona giornata a tutti!

**andrealeti** · 07-10-2011, 13:01

Per il tuo scopo devi utilizzare i box flottanti con dimensione fissa e float:left

meglio ancora se racchiusi da un div clear:both;

Le tabelle devono essere utilizzati per i dati tabellari stile ISTAT

**skini82** · 07-10-2011, 14:30

è proprio li che volevo arrivare... Non voglio la dimensione fissa!
O meglio, quello a sinistra si, ma quello a destra deve prendere tutto il resto della pagina, cosa che evidentemente non fa se gli do una dimensione fissa.

**carlomarangoni** · 07-10-2011, 23:13

codice:

	<head>

<style type="text/css">.div-1 {
	border: 1px outset #f0f0f0;
	height: 4.94em;
	text-align: left;
	width: 61.19em;
}

.div-1-1 {
	border: 1px inset #f0f0f0;
	clear: both;
	float: left;
	height: 4.81em;
	padding: 0px;
	width: 8.00em;
}

.div-1-2 {
	border: 1px inset #f0f0f0;
	float: left;
	height: 4.81em;
	padding: 0px;
	width: 52.94em;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="div-1-1">[img]../../../images/logo.png[/img]</div>
			<div class="div-1-2">
				<div id="navbar"></div>
			</div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

Discussione: Sostituire DIV a Tabella

Strumenti discussione

Ricerca discussione

Visualizza

Sostituire DIV a Tabella

Permessi di invio