Div FLUIDI centrali ?!!?

**caramelleamare** · 11-06-2011, 11:21

Ciao a tutti, dopo circa 11 ore di prove ci rinuncio, anche perche in rete on ho trovato suggerimenti che fanno al caso mio:
Sarà una cosa da niente ma io non riesco a fare questo: un DIV contenitore di 900px, che stia al centro del body. Al suo interno una TESTATA fluida di 900px, e sotto DUE DIV affiancati ed ENTRAMBI FLUIDI.
questo è quello che sono arrivato a scrivere:

codice:

body{
	margin:0;
	padding:0 25% 0 25%;
}
#contenitore {
	width:100%;
	margin: 0 auto;
}
#testata {
	background-color:#399;
	height:150px;
}
#sinistro {
	float:left;
	border-right-color:#39F;
	border-right-style:double;
	padding-right:15px;
	padding-top:10px;
}
#destro {
	margin-left:150px;
	padding-top:10px;
	padding-left:10px;
	border-right-color:#39F;
	border-right-style:double;
	border-left-color:#39F;
	border-left-style:double;
}

Ho messo i bordi per vedre bene inizio e fine dei div.
Quello che ho notato è che il float sul detsro gli toglie la fluidità, cioè scatta sotto al sinistro prima di iniziare ad adattare il contenuto.
Se non metto il float pero il destro si aovrappone al sinistro e devo regolarmi con il margine (150 px), il che implica n div destr a larghezza fissa.
Poi: non sono riuscito nemmeno a impostare i 900px di larghezza del contenitore, ma ho dovuto aggieggiare a occhio sul padding del body!
Insomam un gran casino e non ho risolto, se qualcuno sa come fare lo ringrazio molto.
Ci dev'essere qalche meccanismo che mi sfugge.

**moonba** · 13-06-2011, 11:16

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html.it</title>
<style type="text/css">
<!--
body {
	margin:0;
	padding:0;
}
#contenitore {
	width:900px;
	margin: 0 auto;
        background-color:black;
}
#testata{
	width:100%;
        background-color:violet;
        height:150px;
}

#sinistro {
	float:left;
width:50%;
	
clear:left;
	
background-color:red;
}
#destro {
	float:left;
	width:50%;
	
background-color:green;
}

-->
</style></head>

<body>
<div id="contenitore">
<div id="testata">
 
</div>
<div id="sinistro">Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</div>
<div id="destro">Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</div>
</div>
</div>
</body>
</html>

**caramelleamare** · 13-06-2011, 12:10

Con il codice che hao postato te i contenuti dei div rimangono fissi, non si ridimensionano bensi spariscono quando la finestra è troppo piccola.
Allora, ci sono riuscito, ma non è stao cosi semplice perche ogni volta ne veniva fuori una diversa.
Ti posto il codice funzionante per come lo volevo io:

codice:

body {
    margin:0;
    padding:0;
}
#contenitore { 
    max-width:900px;
    margin:0 auto;
    }
#testata {
    background-image:url(img/logo_presenta.jpg);
    background-repeat:no-repeat;
    height:78px;
    margin-bottom:50px;
    background-color: #f2f5c6;
}
#sinistro {
    float:left;
    width: 16%;
    margin-bottom: 30px;
    text-align:center;
}
#destro {
    float: right;
    max-width: 750px;
    max-height: 200px; 
    margin-bottom: 30px;
    margin-left: 150px;
    position: absolute;
    text-align: justify;
    overflow: hidden;
}
#sotto {
    clear:both;
}

Se lo provi inserendo del del testo nei div vedrai che si posizionano perfettamente.
LA cosa strana è che se tolgo l'absolute al DESTRO, me lo posiziona sotto al sinistro anhe se gli do 20 px di bonus nelle dimensioni.
Con absolute il margine lo calcola a partire dal contenitore e non dal body.
Clear left o right, come avevi detto, da giustamente l ostesso risultato.
sempre sul DESTRO ho sfruttato ancora la max-width, sottraendola al margin-left, cosi mi sono risparmiato di lavorare in percentuale, che risulta meno preciso.
DESTRO: ho poi inserito la max-heigth e l'overflow:hidden per evitare che andasse a sovrapporsi al SOTTO durante il ridimensionamento.
La chiave per il contenitore, la cosa piu importante da capire secondo me, è stata quella di impostare la max-width a 900px, così ho potuto togliere il padding al body e fare un lavoro molo piu preciso.
Sul SINISTRO impostare la larghezza fissa o in percentuale come vedi ora, da lo stesso risultato se lo utilizzi come menu con immagini. Suppongo che se ci metti del testo e lo vuoi fluido sia obbligatorio usare la %.
La presenza del SOTTO non è determinante.

Spero di essere stato chiaro, e grazie per l'aiuto.

**moonba** · 13-06-2011, 12:14

????

**caramelleamare** · 13-06-2011, 12:18

Cosa c'è che non torna?
Ovviamente c'è da mettere l'html e sostituire l'immagine della testata.
Devo postare anche l'html?

Discussione: Div FLUIDI centrali ?!!?

Strumenti discussione

Ricerca discussione

Visualizza

Div FLUIDI centrali ?!!?

Permessi di invio