Prvek <div> slouží především jako kontejner pro jiné prvky. Ukážeme stylování tohoto kontejneru.

<div> je implicitně blokový prvek, což znamená, že se roztahuje na maximální šířku a v textu je před ním i po něm řádkový zlom.

Příklad 1
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
div {
  background-color: #FFF4A3;
}
</style>
</head>
<body>

<h1>DIV 1. příklad</h1>

Lorem Ipsum <div>Já jsem  div</div> dolor sit amet.

<p>Žluté pozadí ukazuje, kde je prvek div.</p>

</body>
</html>
Tak vypadá příklad 1.

div1

Prvek <div> nemá žádné nezbytné atributy, ale velmi často se používají style, class a id.

Prvek <div> jako kontejner

Prvek <div> velmi často seskupuje jiné prvky webové stránky dohromady.

Příklad 2
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
div {
  background-color: #FFF4A3;
}
</style>
</head>
<body>

<h1>DIV 2. příklad</h1>

<div>
  <h2>Praha</h2>
  <p>Praha je hlavním městem České republiky.</p>
  <p>Praha má více než 1 milion obyvatel.</p>
</div>

<p>Žluté pozadí ukazuje, kde se nachází prvek div.</p>

</body>
</html>
Tak vypadá příklad 2.

div2

Zarovnání prvku <div> na střed stránky

Jestliže máte prvek <div> který nemá šířku 100% a chcete ho umístit na střed stránky, nastavte CSS vlastnost margin na hodnotu auto.

Příklad 3
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
div {
  width: 300px;
  margin: auto;
  background-color: #FFF4A3;
}
</style>
</head>
<body>

<h1>DIV 3. příklad - vycentrování</h1>

<div>
  <h2>Praha</h2>
  <p>Praha je hlavním městem České republiky.</p>
  <p>Praha má více než 1 milion obyvatel.</p>
</div>

<p>Žluté pozadí ukazuje, kde se nachází prvek div.</p>

</body>
</html>
Tak vypadá příklad 3.

div3

Několik prvků div>

Ná stránce můžete mít několik kontejnerů.

Příklad 4
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>Příklad 4 - několik prvků DIV</h1>

<div style="background-color:#FFF4A4;">
  <h2>Praha</h2>
  <p>Praha je hlavním městem České republiky.</p>
  <p>Praha má více než 1 milion obyvatel.</p>
</div>

<div style="background-color:#FFC0C8;">
  <h2>Bratislava</h2>
  <p>Bratislava je hlavním městem Slovenské republiky.</p>
  <p>V Bratislavě bydlí přibližně 475 000 obyvatel.</p>
</div>

<div style="background-color:#D9EEE1;">
  <h2>Vídeň</h2>
  <p>Vídeň (německy Wien, rakousko-bavorsky Wean) je hlavním městem Rakouska.</p>
  <p>Vídeň má více než 2 miliony obyvatel.</p>
</div>

<p>K divům jsou přidány styly, aby je bylo možné odlišit a vypadalo to elegantněji.</p>

</body>
</html>
Tak vypadá příklad 4.

div4

Zarovnání divů vedle sebe

Při tvorbě HTML stránek často potřebujeme umístit divy vedle sebe.

div5

Dělá se to různými způsoby. Podíváme se na tři nejběžnější.

Float

Vastnost CSS float nebyla původně myšlena pro zarovnání prvů <div> vedle sebe, ale používá se pro tento účel již mnoho let.

Příklad 5
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
div.mycontainer {
  width:100%;
  overflow:auto;
}
div.mycontainer div {
  width:33%;
  float:left;
}
</style>
</head>
<body>

<div class="mycontainer">

<div style="background-color:#FFF4A4;">
  <h2>Praha</h2>
  <p>Praha je hlavním městem České republiky.</p>
  <p>Praha má více než 1 milion obyvatel.</p>
</div>

<div style="background-color:#FFC0C8;">
  <h2>Bratislava</h2>
  <p>Bratislava je hlavním městem Slovenské republiky.</p>
  <p>V Bratislavě bydlí přibližně 475 000 obyvatel.</p>
</div>

<div style="background-color:#D9EEE1;">
  <h2>Vídeň</h2>
  <p>Vídeň (německy Wien) je hlavním městem Rakouska.</p>
  <p>Vídeň má více než 2 miliony obyvatel.</p>
</div>

</div>

</body>
</html>
Vypadá to takto

div5

Má to jednu nevýhodu, pokud máme úzkou stránku a všechno se nám na ni nevejde.

div6

Inline-block

Jestliže změníte vlastnost display z block na inline-block, potom se nebude dávat před i za prvek <div> řádkový zlom, ale prvky <div> budou zobrazeny vedle sebe.

Příklad 6
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
div {
  width:30%;
  display:inline-block;
}
</style>
</head>
<body>

<div style="background-color:#FFF4A4;">
  <h2>Praha</h2>
  <p>Praha je hlavním městem České republiky.</p>
  <p>Praha má více než 1 milion obyvatel.</p>
</div>

<div style="background-color:#FFC0C8;">
  <h2>Bratislava</h2>
  <p>Bratislava je hlavním městem Slovenské republiky.</p>
  <p>V Bratislavě bydlí přibližně 475 000 obyvatel.</p>
</div>

<div style="background-color:#D9EEE1;">
  <h2>Vídeň</h2>
  <p>Vídeň (německy Wien) je hlavním městem Rakouska.</p>
  <p>Vídeň má více než 2 miliony obyvatel.</p>
</div>

</body>
</html>
Vypadá to takto

div7

Flexibilní rozvržení

Flexibilní rozvržení bylo vytvořeno kvůli tomu, aby se usnadnil návrh stránky, která funguje dobře jak na počítačích, tak i na mobilech. Je to takové rozvržení bez použití plovoucího designu nebo polohování.

Aby to fungovalo, obklopte prvky <div> dalším prvkem <div> a přidělte mu vlastnost kontejneru display: flex;.

Příklad 7
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
.mycontainer {
  display: flex;
}
.mycontainer > div {
  width:33%;
}
</style>
</head>
<body>

<h1>Flexibilní příklad</h1>

<p>Zarovnání tří divů vedle sebe.</p>

<div class="mycontainer">

  <div style="background-color:#FFF4A4;">
  <h2>Praha</h2>
  <p>Praha je hlavním městem České republiky.</p>
  <p>Praha má více než 1 milion obyvatel.</p>
</div>

<div style="background-color:#FFC0C8;">
  <h2>Bratislava</h2>
  <p>Bratislava je hlavním městem Slovenské republiky.</p>
  <p>V Bratislavě bydlí přibližně 475 000 obyvatel.</p>
</div>

<div style="background-color:#D9EEE1;">
  <h2>Vídeň</h2>
  <p>Vídeň (německy Wien) je hlavním městem Rakouska.</p>
  <p>Vídeň má více než 2 miliony obyvatel.</p>
</div>

</div>

</body>
</html>
Vypadá to takto

div8

Tento způsob stylování netrpí při úzké obrazovce.

div9

Mřížka

Mřížkový návrh (grid layout) nabízí systém rozvržení založený na mřížce s řádky a sloupci, což usnadňuje navrhování webových stránek bez nutnosti použití plovoucích prvků a umístění.

Vypadá to téměř stejně jako flex, ale má schopnost definovat více než jeden řádek a umístit každý řádek samostatně.

Metoda mřížky CSS vyžaduje, abyste prvky <div> obklopili jiným prvkem <div> a uvedli vlastnost diplay: grid; a potom ještě musíte zadat šířku každého sloupce.

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}
</style>
</head>
<body>

<h1>Příklad mřížka</h1>

<p>Zarovnání tří prvků div vedle sebe.</p>

<div class="grid-container">

  <div style="background-color:#FFF4A4;">
  	<h2>Praha</h2>
  	<p>Praha je hlavním městem České republiky.</p>
  	<p>Praha má více než 1 milion obyvatel.</p>
  </div>

  <div style="background-color:#FFC0C8;">
    <h2>Bratislava</h2>
    <p>Bratislava je hlavním městem Slovenské republiky.</p>
    <p>V Bratislavě bydlí přibližně 475 000 obyvatel.</p>
  </div>

  <div style="background-color:#D9EEE1;">
    <h2>Vídeň</h2>
    <p>Vídeň (německy Wien) je hlavním městem Rakouska.</p>
    <p>Vídeň má více než 2 miliony obyvatel.</p>
  </div>

</div>

</body>
</html>
Výsledek

div10

Řešení domácího úkolu

Naivní a špatné řešení domácího úkolu pomocí tabulky

Mnohem lepší řešení domácího úkolu bude pomocí mřížkového návrhu div10a.html nebo pomocí flexibilního rozvržení div8a.html.