affiancare oggetti...

**aliblui** · 22-02-2006, 11:57

Da poco ho iniziato a smanettare con i css e mi sono imbattuto in alcune difficoltà che da quanto ho letto sul forum sono tipiche di chi inizia e sono anche riuscito a superarle.
Ora ho un problema che mi affligge.

Per fare in modo che l'altezza del main fosse uguale a quella del contenuto ho tolto le proprietà float a tutti gli oggetti contenuti nel main (non so se è la soluzione migliore ma sono riuscito a fare quello che volevo...qualcuno può suggerirmi come fare in maniera diversa?) e quando vado a scrivere:

codice:

<div id="container2">
	<div class="box_container2">a</div>
	<div class="box_container2">b</div>
	<div class="box_container2">c</div>
	<div class="box_container2">d</div>
</div>

gli oggetti box_container2 non sono affiancati come succedeva prima ma sono uno sotto l'altro, io invece avrei bisogno di riempire il container2 con 4 di questi box affiancati.

il codice per i 2 oggett in questioni è questo

codice:

div#container2 {
	width: 500px;
	background-color: #ffffff;
	padding-bottom: 15px;
	margin-left: 20px;
	margin-bottom: 10px;
	margin-top: 5px;
	
	
}

.box_container2 {
	width: 120px;
	margin-top: 10px;
	
}

Dove sbaglio?
Ciao e grazie,
Luigi

**fcaldera** · 22-02-2006, 12:14

codice:

<style>
div#container2 {
	width: 500px;
	background-color: #ffffff;
	padding-bottom: 15px;
	margin-left: 20px;
	margin-bottom: 10px;
	margin-top: 5px;
	
    height: auto;
    
    
}

.box_container2 {
	width: 120px;
	margin-top: 10px;
	
	float : left;
    
}
</style>

Ciao

**aliblui** · 22-02-2006, 12:27

ciao e grazie per la risposta. Avevo già provato con questa soluzione. il problema è che se metto a qualche oggetto contenuto nel main l'attributo float questo mi salta fuori dal main ed perdo le dimensioni automatiche per il main. il problema credo sia proprio questo. ho sbagliato qualcosa nel main...
se faccio come mi hai suggerito il container 2 mi resta nel main e i 4 boxcontainer vanno al di sotto.
Per maggiore chiarezza posto anche il codice del main e di tutta la pagina.

codice:

<body>
<div id="main">


    <div id="spacer">
      <div class="data">data </div>	
       					
      					

 </p>
   		<div id="comandi">
	    	<div class="controlli">senza grafica</div> 
      		<div class="controlli">con grafica</div>
   		</div>  </div> 
   						 
  <div id="nome_canale">
	<div class="navbar">chi siamo </div>
  </div>
 <div id="barra_sottocanali">Inserire qui il contenuto per  id "barra_sottocanali"</div>
 <div id="canali">
 	<div class="boxcanale"> </div>
	<div class="boxcanale"></div>
	<div class="boxcanale"></div>
  </div>
						  
<div id="container2">
	<div class="box_container2">1</div>
	<div class="box_container2">2</div>
	<div class="box_container2">3</div>
</div>
  

</div>
....

il codice del main è

codice:

div#main {
	text-align: left;
	margin: 0 auto;
	width: 760px;
	background-color: #6666FF;
	padding-bottom: 5px;
	
}

**aliblui** · 23-02-2006, 10:58

Ho rifatto tutta la struttura della pagina partendo dall'esmpio che è su html.it per un layout con il menù di navigazione a destra.
Riesco ad impostare l'altezza del div main che contiene tutti gli altri oggetti in modo che nessuno di questi ne esca. Il problema nasce quando all'interno del div content inserisco 4 box con float impostato a left. Questi 4 vanno subito fuori dal main. Ho provato a togliere il float e ad impostare display inline ma non va bene!
Dove sbaglio? come posso affiancare questi 4 box senza che escano?

Ciao e grazie!
Luigi

Discussione: affiancare oggetti...

Strumenti discussione

Ricerca discussione

Visualizza

affiancare oggetti...

Permessi di invio