Ca sa aliniati mai multe tag-uri <div> pe aceeasi linie in plan orizontal, puteti folosi aceste doua proprietati CSS: display: inline-block, sau float (cu valoarea "left", sau "right").
- Pentru un design responsiv, ca elementele <div> sa ramana aliniate si ajustate la lungimea ferestrei browser-ului, folositi valori in procente (%) la lungimea DIV-urilor si margini.


Exemplu Aliniere cu inline-block

<!DOCTYPE html>
<html>
<head>
<title>Titlul</title>
<style>
#left, #center, #right {
 position: relative;
 display: inline-block;
 margin: 1em 0.1em 0.1em 0.8%;
 padding: 0.1em;
 background: #ebebfb;
 border: 2px solid blue;
}
#left {
 width: 22%;
 height: 11em;
}
#center {
 width: 52%;
 height: 14em;
}
#right {
 width: 16.2%;
 height: 11em;
}
</style>
</head>
<body>

<div id="left">
 <div>
 <a href="https://coursesweb.net/" title="Web Courses">CoursesWeb.net</a><br/>
 <a href="https://marplo.net/" title="MarPlo.net">MarPlo.net</a><br/>
 <a href="https://gamv.eu/" title="Flash Games">Flash Games</a><br/>
 </div>
</div>

<div id="center">
 <p>Content in the center Div.<br/>
 HTML Course and Tutorials - Align DIVs</p>
</div>

<div id="right">
 Content in the Div from right side.
</div>

</body>
</html>

Exemplu Aliniere cu float

- Daca folositi proprietatea CSS float, adaugati un element HTML cu proprietatea "clear: both;" dupa ultimul DIV care are aplicat "float"; astfel aceasta nu va afecta celelalte elemente din pagina care sunt dupa DIV-urile aliniate.
<!DOCTYPE html>
<html>
<head>
<title>Titlul</title>
<style>
#left, #center, #right {
 position: relative;
 float: left;
 margin: 1em 0.1em 0.1em 0.8%;
 padding: 0.1em;
 background: #ebebfb;
 border: 2px solid blue;
}
#left {
 width: 22%;
 height: 11em;
}
#center {
 width: 52%;
 height: 14em;
}
#right {
 width: 16.2%;
 height: 11em;
}
.clr { clear: both; } /* to anulate the effect of the float */
#footer {
 position:relative;
 width: 99%;
 height: 5em;
 margin: 1em auto 0.2em auto;
 background: #befbbe;
}
</style>
</head>
<body>

<div id="left">
 <div>
 <a href="https://coursesweb.net/" title="Web Courses">CoursesWeb.net</a><br/>
 <a href="https://marplo.net/" title="MarPlo.net">MarPlo.net</a><br/>
 <a href="https://gamv.eu/" title="Flash Games">Flash Games</a><br/>
 </div>
</div>

<div id="center">
 <p>Content in the center Div.<br/>
 HTML Course and Tutorials - Align DIVs using float:left;</p>
</div>

<div id="right">
 Content in the right side Div.
</div>
<br class="clr" />

<div id="footer">
 Div under the DIVs aligned with "float: left", after the tag with "clear: both;".
</div>

</body>
</html>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Aliniere DIV-uri pe aceeasi linie

Last accessed pages

  1. Numere cardinale 1-10 (881)
  2. Baze de date SQL 2 (601)
  3. Cursuri limba engleza gratuite si lectii online (13661)
  4. Notiuni fundamentale despre bazele de date SQL (2600)
  5. CSS3 - Background proprietati noi (256)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1939)
  2. Creare si editare pagini HTML (1110)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1033)
  4. Curs HTML gratuit Tutoriale HTML5 (949)
  5. Coduri pt culori (778)