border ad un box al 100% senza scroll-bar oriz

[bDaniele]

salve,
l'oggetto riepiloga tutto, mi spiego meglio:

ho un foglio di stile cosi:

body{
	margin:0;
	padding:0;
}

#test{
	width: 100%;
	background-color: Aqua;
	border-style: solid solid;
	border-width: thin;
}

e una pagina dove visualizzo il box in questo modo:

<div id="test">Test box al 100% di larghezza</div>

il problema è compare la scrollbar orizzontale.
se tolgo il bordo tutto ok.

c'è modo per risolvere?

io credo che il problema si verifica perchè il bordo fa oltre il 100%, si può indicare che il bordo deve essere all'interno del box?

io ho la necessità del box al 100% in quanto sto provando a realizzare un layout fluido.

grazie in anticipo

[Zippo]

Premetto che non sono un guru dei css....mi sono solo incuriosito del tuo problema e ho trovato una soluzione piuttosto rozza, però sembra funzionare. Il problema nasce come dicevi dalle dimensioni. Il div occupa il 100% e i bordi escono da questo 100% richiamando così lo scroll.
Per nascondere lo scroll solitamente si usa overflow: hidden; In questo caso funziona con FF ma non è sufficiente per IE, quindi occorre diminuire di pochissimo la larghezza del div:

body{
	margin:0;
	padding:0;
	overflow:hidden;
}
#test{
	width: 99,8%;  /* attenzione, usa la virgola e non il punto! */
	background-color: Aqua;
	border-style: solid solid;
	border-width: thin;
}

[bDaniele]

Ciao Zippo, grazie dell'interessamento.
anche io avevo adottato una soluzione simile, solo che effettivamente è poco elegante e ho paura che con qualche risoluzione particolare si vede la scroolbar oppure si vede lo spazio bianco tra il box e il bordo pagina,
la mia curiosità in questo caso qual'è la soluzione ottimale, in quanto per anni sono andato avanti a tentativi ma ora è il caso di fare le cose così come vanno fatte.

una cosa che già mi piace di più è questa, ho modificato così il foglio di stile:

body{
	margin:0;
	padding:0;
}

#test{
	width: 100%;
	background-color: Aqua;
}

#test_in{
	width: inherit;
	border-style: solid solid;
	border-width: thin;
}

e ho modificato così la pagina:

<div id="test"><div id="test_in">Test box al 100% di larghezza</div></div>

e funziona bene.

In pratica sono due div uno dentro l'altro, dove il più esterno comanda la larghezza, mentre il secondo mette il bordo.

se c'è soluzione migliore, ben venga.

[Zippo]

In effetti l'ultima soluzione che hai proposto sembra la più adatta.
Se funziona bene direi che sei a posto. Se qualcuno ha altre idee si faccia avanti, io purtroppo non riesco ad andare oltre.

Ciao

[bDaniele]

Originariamente inviato da Zippo
Se qualcuno ha altre idee si faccia avanti, io purtroppo non riesco ad andare oltre.

siamo in due...

comunque funziona bene nelle varie condizioni che ho provato e anche logicamente funziona in quanto il primo box ha la larghezza al 100%, mentre il secondo fa solo da bordo interno al primo.

saluti e grazie dell'interessamento.

[Darios81]

Ciao ragazzi , programmo ormai da un anno , i CSS , e devo dire pur avendo una certa esperienza molte cose , sn incambili , per via di Internet Explorer che rompe e bb poco.

Allora i bordi vngono creati in maniera differente da IE e FIREFOX.Ora nn mi ricordo ., ma FIREFOX , mette i bordi all'interno del DIV o IMG o chicchesia , mentre IE li crea ESTERNI.

Di conseguenza se fai un div 100% di larghezza e metti il bordo di 2px. su Firefox niente di he tutto apposto , mentre su IE avrai un div della larghezaz orizzontale + 2px di bordo , col risultato che spunta la barra orizzontale.

La soluzione di diminuire leggermente il div funziona su IE , ma su firefox avrete il risultato che a destra ci sara un margine di 2px lasciato vuoto.

Alla fine nn e' male e conviene trovare una soluzione intermedia per risolvere il problema.

L'OVERFLOW , nn serve in questo caso.L'overflow serve quando fate un div , e il contenuto tipo testo i mg sporano nella dimensione del DIV.
Overflow entra in azione permettendo d RIDIMENSIONARE ; TAGLIARE o METTERE GLI SCROLL.

Ciao spero di esserti stato utile Dario

[Zippo]

Originariamente inviato da Darios81
...La soluzione di diminuire leggermente il div funziona su IE , ma su firefox avrete il risultato che a destra ci sara un margine di 2px lasciato vuoto.

Non mi pare proprio, ho provato e riprovato, nessun margine bianco se si riduce il div del 99,8%

E comunque l'overflow si usa anche in questi casi, per nascondere la scrollbar.

[Darios81]

non mi credere , io ti do il mio consiglio , solamente

[Zippo]

Non è che non ti credo, ho solo provato con Firefox 1.5 e IE 6 e non vedo margini bianchi, tutto qui.