[CSS] Spazio tra due div "verticali"

[Marco1980]

Ciao, come faccio partendo da questo codice:

<div class="box-container">
<div class="box-login">
	<div class="box-base">
		<div class="box-header">  
			<div class='freccia'>:: Login</div>
		</div>
		Test login
	</div>
</div>
<div class="box-credits">
	<div class="box-base">
		<div class="box-header">  
			<div class='freccia'>:: Credits</div>
		</div>
		Test Credits
	</div>
</div>
</div>

e

/* DESIGN SECTION */
.box-base{ 
	background-color: #FFF;
	border: 1px solid #CCC;
	color: #999;
	margin: 0px;
	padding: 0px; 
}

.box-base a:link, 
.box-base  a:visited, 
.box-base a:active{ 
	background-color: transparent; 
	color: #222; 
	text-decoration: none;
}

box-base a:hover{
	background-color: transparent; 
	color: #5176B5; 
	text-decoration: none;
}

.box-header{
	background-color: #F9F9F9;
	background-image: url(../../images/3/table_header.gif);
	border-bottom: 1px solid #CCC;
	height: 18px;
	color: #424242;
	font-size: 12px;
	font-weight: bold;
	padding: 0px 5px 0px 5px; 
	margin: 0px;
}

.freccia{
	background-color: transparent;
	background-image: url(../../images/3/freccia.gif);
	background-position: right;
	background-repeat: no-repeat;
}
/* END DESIGN SECTION */
/* BOX DEFINED SECTION */
.box-container{
	border: 0px;
	background-color: transparent;
	width=100%;
}

.box-login{
	border: 0px;
	border-spacing-right: 2px;
	padding: 0px; 
	margin: 0px;
	width: 60%;
	float: left;
}

.box-credits{
	border: 0px;
	padding: 0px 0px 0px -15px;
	margin: 0px;
	width: 40%;
	float: right;
}
/* BOX DEFINED SECTION */

a creare uno spazio di 2px tra un div e l'altro? Ho provato con margini e padding ma devo aver sbagliato qualcosa... Impostare sul 39% il .box-credits non mi piace molto..
Secondo voi esiste un metodo migliore creare la mia struttura senza l'utilizzo di tutti quei div? Grazie.

[floyd46]

a leggere il codice risulta 1 pò difficile capire e, soprattutto, risalire a quello che chiedi;
non hai la pagina in rete? scrivi il link qui nel forum.
ciao

[Marco1980]

Scusate..
Lo spazio tra le due "tabelle" .. Adesso è creato utilizzando 60% e 39% ma proprio per la sua variabilità non mi piace

[Marco1980]

Buongiorno...

[floyd46]

ciao
se a te nn piace la misura in %, puoi racchiudere quei div in un "container" assegnando misure fisse in px. Ovviamente lo spazio, che adesso si vede tra un blocco e l'altro, puoi assegnarlo con il margin.

[Marco1980]

Allora.. Il container è .box-container (100%).. al suo interno ci sono .box-login e .box-credits che volgio lasciare in percentuale. Il problema è solo lo spazio varticale tra un box e l'altro all'interno del container. Il margin l'ho provato ma non funziona.. mi "appiccica" i due box. E' come se facesse 60% + 40% + *px di margine ed ovviamente non stanno nel 100%. E' possibile dire a un div di occupare tutto lo spazio disponibile? In questo modo potrei fare 60% + *px di margine e lasciare la larghezza automatica dell'altro box. Con "auto" però il box diventa largo solo quanto la scritta "Test Credits"...
Mi sembra un problema strano però.. possbile che nessuno abbia avuto tale necessità? :master:

[Marco1980]

.box-prova{
	width: 40%;
	background-color: green;
	padding: 0px 2px 0px 0px;
	float: left;
}
.box-prova2{
	width: 59%;
	background-color: blue;
	padding: 0px 0px 0px 2px;
	float: right;
}

Proviamo così.. magari riesco ad essere più chiaro.
A parte il contenuto dei due box che va bene.. come faccio a far coincidere il blu con il verde? Se imposto width: 60%; al .box-prova2 ottengo questo..

[Marco1980]

Riprovo così.. provate questa pagina .. Riuscite a lasciare 3px (bianco) tra il box blue ed il box rosso senza che il box bianco superi quello grigio chiaro come nell'esempio di sopra?
Se si.. riuscite a dare 5px laterali al box blu (sinistra) e 5px al box rosso (destra)? Il tutto mantendo al 50% la larghezza dei due box (rosso e blu).
Grazie

[Tokai]

Cosi?

	body{ 
		background-color: gray;
		color: #000;
		font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif;
		font-size: 11px;
		margin: 0px;
		padding: 0px;
		text-align:center;
	}
	
	#wrap{ 
		background-color: #CCC;
		width: 90%; 
		margin: 10px auto 10px auto;
		text-align:left;
	}
	
	.box-container,.box-container-space{
		border: 1px solid #000;
		background-color: #FFF;
		height: 300px;
	}	
	.box-container{
		padding: 5px;
	}	

	.box-yellow{
		width: 49%;
		background-color: yellow;
		float: left;
	}
	
	.box-green{
		background-color: green;
		margin-left:51%;
	}
	
	.box-blue{
		background-color: blue;
		width: 49%;
		float: left;
	}
	
	.box-red{
		background-color: red;
		margin-left:51%;
	}
br{
	clear:both;
}

[Marco1980]

Magari...
Lo spazio tra i box non è esattamente di 3px.. E a me servirebbe costante.