[CSS] div px e %

02-01-2009, 18.00.53

ciao,
volevo chiedere: é possibile ad esmpio mettere un menu (fatto con div) di alrghezza in px e poi mettere un altro div affiancato di larghezza 100% cioe che occupa tutto il resto?

vorrei fare un layout a tre colonne tipo:
100px | 100% | 100px

é possibile farlo facilmente attraverso i css? se si come? fin'ora son riuscito solo con le misure tutte uguali % con % e px con px...

grazie...ciao!

**alemoppo** · 02-01-2009, 22.51.41

Non puoi usare una tabella ??

Codice HTML:

<table border="0">
<td width="100">
//1 div
</td>
<td width="100%">
//2 div
</td>
<td width="100">
//3 div
</td>
</table>

Spero essere stato d'aiuto...

CIAO!

03-01-2009, 12.17.42

Il layout con le tabelle è deprecato ormai, si fa con i css.
Prova a dare al div di sinistra float: left;position: absolute;, al div di destra float: right;position: absolute; e al div di centro position: relative;

**webpaul** · 03-01-2009, 16.35.31

Così funziona: devi creare i 3 div delle colonne.
Quelli laterali avranno width:100px.
Tutti e tre avranno "position: absolute".
Così poi indicherai a ogni colonna dove posizionarsi tramite gli attributi top, left, right (i quali indicano quanto spazio lasciare rispettivamente dall'alto, da sinistra e da destra).

Quando fai tutte queste prove dai anche dei colori di sfondo così ti è più facile individuare se le colonne si posizionano dove desideri.

Codice HTML:

<html>
<head>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
}

#colsx, #coldx {
	position:absolute;
	top:0px;
	width:100px;
}

#colsx {
	left:0px;
}

#coldx {
	right:0px;
}

#colcen {
	position:absolute;
	top:0px;
	left:100px;
	right:100px;
}
</style>
</head>

<body>

   <div id="colsx"></div>
   <div id="colcen"></div>
   <div id="coldx"></div>

</body>
</html>

03-01-2009, 18.02.14

dimenticato di dire che i 3 div sono contenuti in un altro div che é allineato al cnetro con una certa larghezza, ho provato in diversi modi e sembra nn andare, funziona con la colonna sinistra ma quella destra viene sballata...

grazie dell'aiuto! ciao!

EDIT:
per ora ho così:

Codice HTML:

	#left {
		width: 18%;
		float: left;
	}
	
	#center {
		width: 64%;
		float: left;
	}
	
	#right {
		width: 18%;
		float: left;
	}

così funziona, ma appunto vorrei mettere left e right 100px e il centro che si ingrandice automatico.. ho provato anche i vostri sistemi! avete qualche altra soluzione?

04-01-2009, 11.24.23

#right {
width: 18%;
float: right;
}

**dementialsite** · 04-01-2009, 12.28.29

Mischiare le misure in pixel e in percentuale è teoricamente possibile, ma, come hai visto, i risultati sono quelli che sono... questo codice dovrebbe funzionare:

Codice HTML:

<style>
#left { width:100px; float:left }
#right { width:100px; float:right }
#center { width:auto }
</style>
...
<div id="left"> ... </div>
<div id="right"> ... </div>
<div id="center"> ... </div>

Due considerazioni:
- l'ordine dei DIV deve essere quello specificato, perché la dichiarazione "auto" funzioni
- avresti potuto inserire 100% al posto di "auto", ma i risultati sarebbero stati diversi tra i browser: IE te l'avrebbe (correttamente?) interpretato come "il 100% della larghezza restante", Firefox invece come "il 100% rispetto alle dimensioni della finestra"

Statemi bene...

04-01-2009, 19.37.25

dementialsite, ho provato anche il tuo metodo, non funziona,.. viene sfasato...

Discussione: [CSS] div px e %

LinkBack

Strumenti discussione

Display

[CSS] div px e %

Regole di scrittura