layout progressivo solo al centro

**Avalox** · 14-10-2005, 15:42

Ciao a tutti...

Ho provato a cercare un pò sul forum e sui vari tutorial, ma non sono riuscito a trovare niente di veramente esauriente (forse non sono bravo a cercare), quindi ho deciso di rivolgermi direttamente a voi

Il mio problema è questo.
Devo fare un layout composto da header, contenuti e footer (come al solito...).

La parte dei contenuti deve essere suddivisa in 3 colonne: sx, centro e dx. Le colonne sx e dx hanno dimensione fissa in pixel (150 e 120px rispettivamente).

Vorrei che la colonna di centro si adattasse in larghezza in modo da avere questa condizione:

sx(150px)+centro(variabile)+dx(120px) = contenuti(98% width)

Come posso fare?

Non voglio utilizzare una tabella, con la quale potrei risolvere facilmente la cosa, ma utilizzare i div...

**Mittico!** · 14-10-2005, 16:05

prova così:

codice:

<style type="text/css">
<!--
#nav {	
	float:left;
	width:150px;
}
#content {
	margin-left:150px;
	margin-right:120px;
}
#sidebar {
	float:right;
	width:120px;
}
-->
</style>


<body>
<div id="nav"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>

Per il 98% quello lo fai inserendo il tutto in un altro div "contenitore" con width a 98%

**Avalox** · 14-10-2005, 16:23

ok...datemi pure di fagiano

E' bastato perseverare nella ricerca....

Layout a tre colonne

e questa è la soluzione da me adottata:

CSS:

codice:

div#header {
	position: relative;
	height: 80px;
	width: 100%;
	background: #219320;
	text-align: center;
	border-bottom: 1px solid #333;
	border-right: 1px solid #333;
	left: 0px;

}

div#coldx {
	float: right; 
	width: 120px;
	\width:130px;
	w\idth:120px;
	padding: 1em 0 20px 5px;
}

div#colsx{
	float: left;
	width: 150px;
	\width:160px;
	w\idth:150px;
	padding: 1em 5px 20px 0px;
}

div#contenuti{
	margin: 0 120px 20px 150px;
	padding: 1em 5px;
}


div#footer {
	clear: both;
	text-align: center;
	padding: 0;
	background-color: #219320;
}

HTML

codice:

   <div id="container">
        <div id="header">...</div>
        <div id="colsx">...</div>
        <div id="coldx">...</div>
        <div id="contenuti">...</div>
        <div id="footer">...</div>
    </div>

**Falcao** · 14-10-2005, 16:28

che poi è quello che ti ha detto mittico!

Discussione: layout progressivo solo al centro

Strumenti discussione

Ricerca discussione

Visualizza

layout progressivo solo al centro

risolto

Permessi di invio