layout 2 colonne, e secondo div che è troppo largo

**fmortara** · 26-03-2010, 11:33

ho un layout a 2 colonne.

codice:

#navigazione {width:200px; float:left; background-color: #d4e9ff;}
#content {border: 1px solid black; margin: 5px 5px 0 205px; width:100%; height:auto; overflow:hidden;}

Io vorrei che content fosse sempre al 100% dello spazio rimanente, ma se metto width 100% la larghezza aumenta del margine sx.

come risolvo?

i due div hanno un header sopra, che penso non centri nulla, e sono all'interno di un container con width 100%, body ed html width 100%.

Info?

**fmortara** · 26-03-2010, 11:38

aggiungo che se non metto height auto ed overflow hidden, la larghezza è ok, come mi aspettavo, ma non contiene gli elementi al suo interno float a loro volta.

e perchè i div al suo interno se impostati a 100% non rispettano la dimensione del #content?

**Mich_** · 26-03-2010, 11:50

Un oggetto float esce dal flusso degli altri elementi (e vive di vita indipendente).
Si puo` forzarlo a rientrare mediante un clear opportuno (prima della fine del contenitore).

Vedi ad esempio: [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

**fmortara** · 26-03-2010, 11:59

grazie conoscevo quella soluzione, alternativamente avevo messo un div clear prima di chiudere il div content.

e per la larghezza che posso fare?

**Mich_** · 26-03-2010, 12:18

Originariamente inviato da fmortara e per la larghezza che posso fare?

metti 100% al contenitore e lascia in automatico il blocco a destra.

Comunque ci sono vari layout pronti da cui puoi copiare: vedi tra i "link utili"

**fmortara** · 26-03-2010, 12:23

si fatto...
e per i contenuti del blocco...?

In nero il blocco a destra che ha margini di 5px,
il blocco che esce è un div con larghezza 100%.

**Mich_** · 26-03-2010, 12:42

Posta anche il codice HTML + CSS (usa il bottone # sopra l'area di inserimento) - oppure posta un link

Ricorda che un width:100% non ha significato se il contenitore non ha larghezza definita (eventualmente ricorsivamente fino a <body> e <html> )

**fmortara** · 26-03-2010, 12:56

Il problema credo che sia il content che non ha il width, ma se lo metto lo somma al margin-left... :master:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> 
<head> 
 
	<meta content="text/html" charset="utf8" /> 
	<style type="text/css"> 
	* {margin: 0;}
	* {font-family: verdana, arial; font-size:10px;}
	h1 {font-size: 18px;}
	body,html { height:100%;margin:0 }
	body {background: url(/templates/default/images/bg_body.jpg) repeat-y}
 
	#container {width:100%;}
	#header {width:100%; height: 80px; background-color: #5faeff; color:white;}
 
	#logo {width:200px; height:80px; background-color: #86c2ff; float:left;}
	#testata {margin: 0 0 0 205px; border: 1px solid white;}
 
	#navigazione {width:200px; float:left; background-color: #d4e9ff;}
	#content {border: 1px solid black; margin: 5px 5px 0 205px;}
 
	    .cleared:after {
	         display		: block;
	         visibility		: hidden;
	         content		: ".";
	         height			: 0;
	         clear			: both;
	     }
 
	     .cleared {
	         clear			: right; /* per Gecko */
	         height			: 1%; /* per IE */
	     }
 
	img {border: 0;}
 
	table {border: 1px solid #007dff; width: 100%; margin: 8px 0 0 0;}
	tr {}
	th {border-left: 1px solid #007dff; border-right: 1px solid #007dff; border-bottom: 1px solid #007dff; background-color: #5faeff; color:#fff;}
	td {border-right: 1px solid #86c2ff; border-bottom: 1px solid #86c2ff;}
 
	tr.filter td {background-color: #ffd3bd;}
	tr.a td {background-color: #f1f8ff;}
 
	div.border {border: 1px solid #007dff; margin:0; padding:2px; height:auto; overflow:hidden;}
	div.title {margin:0 0 5px 0; border-left: 1px solid #007dff; border-right: 1px solid #007dff;
	border-bottom: 1px solid #007dff; background-color: #5faeff; color:#fff; font-weight:bold;
	border-bottom: 1px solid #007dff; background-color: #5faeff; color:#fff; font-weight:bold;}
 
	div.label {float:left; clear:left; width:100px; margin: 0 0 5px 0;}
	div.details {float:left; margin: 0 0 5px 0;}
 
	/*td {border: 1px solid #f00;}*/
	</style> 
  
</head> 
<body> 
 
<div id="container"> 
 
	<div id="header"> 
		<div id="logo">[img]/templates/default/images/logo.png[/img]</div> 
		<div id="testata"> 

		
		</div> 
	</div> 
 
	<div id="navigazione">
	</div>  
 
<div id="content" class="cleared"> 
 
		<h1>title</h1> 
 
<div class="border" style="width:300px; height:150px; float:left; margin: 8px 8px 0 0;"> 
	<div class="title">Dettagli utente</div> 
 
	<div id="userdetails"> 
	</div>  
 
</div> </pre> 
 
 
<div class="border" style="width:500px; height:150px; float:left; margin: 8px 8px 0 0;"> 
	<div class="title">Dettagli aste utente</div>  
	</div>  
 
</div>  
 


<div class="border" style="width:100%; float:left; margin: 8px 8px 0 0;"> 
	<div class="title">Dettagli aste utente</div>  
</div>

</div> 
 
</div>  
 
</body> 
</html>

Originariamente inviato da Mich_
(usa il bottone # sopra l'area di inserimento)

Ma hai visto quanti messaggi ho?

**fmortara** · 27-03-2010, 14:32

nessuno?

**Mich_** · 29-03-2010, 08:50

Ma hai visto quanti messaggi ho?

No, non avevo notato. Scusa

Comunque prova a togliere la formattazione per
.cleared
lasciando pero` quella di
.cleared:after

In fondo alla pillola c'e` un agiornamento che fa riferimento alla pagina The New Clearfix Method

Discussione: layout 2 colonne, e secondo div che è troppo largo

Strumenti discussione

Ricerca discussione

Visualizza

layout 2 colonne, e secondo div che è troppo largo

Permessi di invio