problema centrare Div-uri imbricate

[andras]

Salut,
Am citeva div-uri imbricate (un div care contine alte 4 div-uri) cam asa:

Cod: Selectaţi tot

<div id="grup" >
<div id="board" ></div>
		<div id="grupset"><input type="button" id="startBtn"  class="buton" value="">
			<input type="button" id="clearBtn" class="buton" value="Clear" >
			<input type="button" id="okBtn" class="buton" value="OK" >
		</div>
		<div id="fendiv">
			<label for="fen"  >FEN</label> 
			<textarea rows="2" cols="50" id="fen" name="fen" readonly="readonly" ></textarea>
			<input type="button" id="saveBtn" class="buton" value="Save" />
		</div>
</div>

Cum le fac pe toate un "tot unitar"? adica "board" sa fie sus iar celelalte 2 in ordine sub "board" si toate centrate la mijlloc in div-ul "grup" (butoanele "grupset" sa fie pe orizontala, la fel si "fendiv"). Tot incerc dar nu-mi prea iese, se deplaseaza relativ una fata de alta la orice redimensionare. Multumesc.

Salut
Pentru centrare elemente html, esential e ca elementul parinte sa aibe: text-align:center; iar cele din el margini auto (sau egale) la stanga si dreapta, precum si lungime definita.
Incearca acest cod css; mai adauga /sterge proprietati si modifica valorile dupa cum iti trebuie.

Cod: Selectaţi tot

#grup {
position:relative;
text-align:center;
}
#grup div {
position:relative;
margin:8px auto;
width:75%;
border:1px solid #fe0000;
}
#grup #board {
width:90%;
height:50px;
border:1px solid blue;
}

Am reusit cu gruparea div-urilor pe 2 nivele, dar as dori daca se poate inca un mic sfat: cum grupez pe 3 nivele? Am un caz general (sper edificator):

Cod: Selectaţi tot

<div id="d1" >
	<input type="text" id="t1"/>
	<div id="d2" >
		<input type="text" id="t21"/>	
		<input type="text" id="t22"/>	
		<div id="d3" >
			<input type="text" id="t3"/>
		</div>
	</div>	
</div>

CUm pun t1, t21, t22, t3 pe orizontala (in ordine), apoi pe verticala? Multumesc.

Nu am inteles cum vrei "pe orizontala apoi pe verticala".
In general sunt 2 tipuri de elemente: de tip "inline" care apar aliniate orizontal, precum <span>, <em>, <input>, etc...; si de tip "block" care apar unele sub altele, precum <p>, <div>, <pre>, etc.
In css poti sa le schimbi tipul de afisare, cu proprietatea "display"; astfel ca cele inline sa se comporte ca tip block, si invers.
De exemplu, daca aplici: disply:inline; la doua Div-uri, vor fi afisate in linie, orizontal.
De asemenea, se poate folosi si proprietatea "float" pentru a forta alinierea pe orizontala.
- Poti sa gasesti mai multe explicatii si exemple pe internet la cautare: " css display float ".

Ma refeream la varianta de afisare in linie (inline) si alta varianta de afisare unele sub altele (block) dar m-am lamurit in parte din ce mi-ai spus. Totusi, cum fac gruparea in CSS a celor 3 div-uri astfel incit sa d3 sa fie inclus in d2 si d2 sa fie inclus in d1?

Dupa cum sunt adaugate acele div-uri in cod, ele sunt incluse asa cum ai mentionat.
Poate ca dintr-o imagine sau schita grafica mi-as putea da seama cum vrei sa fie afisate acele div-uri.