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.
In urmatorul exemplu, elementele HTML <div> au proprietatea CSS: display: 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>
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>
<img src="image.jpg" usemap="#map1"> <map name="map1"> <area shape="rect" coords="9, 120, 56, 149" href="#"> <area shape="rect" coords="100, 200, 156, 249" href="#"> </map>
#id {
overflow: auto;
}document.getElementById("id").onmouseover = function(){
document.write("Sa ai Viata Buna");
}if(isset($_GET["id"])) {
echo $_GET["id"];
}Marc is the boy who won the prize. - Marc e baiatul care a castigat premiul.
Voy a ver al pintor de quien les hablé ayer. - Ma duc sa vad pictorul despre care ti-am vorbit ieri.