problemi layout 3 colonne

**Isma75** · 11-03-2005, 11:34

salve a tutti,
ho un piccolo problema con i css.
Ho trovato un po' di codice in rete e ho cercato di adattarlo alle mie esigenze.
Ho realizzato un menu a tre colonne con un immagine (logo) al top della pagina.
Nella colonna centrale quella destinata al contenuto di ogni singola pagina mi capita una cosa un po' strana; infatti se aumento il testo all'interno del contenitore, lo stesso va a coprire il contenitore che si trova alla sua destra (la 3° colonna).

come mai accade tutto ciò?
per maggiore chiarezza vi riporto il codice html e quello css.
Il contenitore in questione si chiama centrale e le altre due colonne sinistra e destra, mentre il top della pagina (contenente il logo) si chiama box.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>sito in costruzione</title>
	<style type="text/css" media="screen">@import "layout3colonne.css";</style>

</head>

<body>
<div id="box">
	<div id="titolo" align="center">
[img]../immagini/logo.jpg[/img]</p>

</div>

<div class="centrale">
	<h1>Benvenuti</h1>
	<P align="justify">provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova
        provaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprovaprova

                        
        </p>
</div>


<div id="sinistra">
<div id="navcontainer">

codice:

.centrale>p {margin:0px;}
.centrale>p+p {text-indent:30px;}

.centrale {
	position:relative; 
	width:auto;
 	min-width:80px;
	margin:3px 175px 10px 140px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3; 
	}

#sinistra {
	position:absolute;
	width:150px;
	top:120px;
	left:8,5%;
	border:1px dashed black;
	background-color:#eee;
	padding:0px;
	z-index:2;


	}
	

body>#sinistra {width:120px;}

#destra {
	position:absolute;
	width:150px;
	top:120px;
	right: 88px;
	border:1px dashed black;
	background-color:#eee;
	padding:0px;
	z-index:1;

	voice-family: "\"}\"";
	voice-family:inherit;
	width:168px;
	}

body>#destra {width:168px;}
#titolo p {
padding:10px;
margin:0px;
}

#box {
width:850px;
margin: 20px auto;
padding:0px;
text-align:left;
}

qualcuno mi sa dire cosa devo cambiare?

vi ringrazio
Isma

**Horazon** · 11-03-2005, 12:23

Non sono un esperto...
Pero` a occhi mi sembra che in questa dichiarazione:

codice:

.centrale {
	position:relative; 
	width:auto;
 	min-width:80px;
	margin:3px 175px 10px 140px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3; 
	}

il margine che lasci a destra e` minore della larghezza dello stesso box che sta a destra...

Magari sbaglio completamente... ^^;;

Discussione: problemi layout 3 colonne

Strumenti discussione

Ricerca discussione

Visualizza

problemi layout 3 colonne

Permessi di invio