CSS Tutorials, Properties

Display: Block or Inline

display.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Display Block</title>

<style>

#myFirstLayer, #mySecondLayer {
font: 16px "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

#myFirstLayer ul {
margin: 0;
padding: 3px 10px 0 10px;
list-style-type: none;
}
#myFirstLayer ul li {
display: block;
padding: 3px 4px;
background: #ccc;
border-bottom: 1px solid #fff;
cursor: hand;
}
#myFirstLayer ul li:hover {
background: #333;
color: #fff;
}

#mySecondLayer ul {
margin: 1em 0 0 0;
list-style-type: none;
padding: 3px 10px 0 10px;
}
#mySecondLayer ul li {
display: inline;
padding: 3px 4px;
background: #ccc;
margin-right: 5px;
cursor: hand;
}
#mySecondLayer ul li:hover {
background: #333;
color: #fff;
}

#myThirdLayer ul {
display: none;
margin: 1em 0 0 0;
list-style-type: none;
padding: 3px 10px 0 10px;
}
#myThirdLayer ul li {
display: inline;
padding: 3px 4px;
background: #ccc;
margin-right: 5px;
cursor: hand;
}
#myThirdLayer ul li:hover {
background: #333;
color: #fff;
}

</style>
</head>

<body>

<div id="myFirstLayer">
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
</div>

<div id="mySecondLayer">
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
</div>

<div id="myThirdLayer">
<p>This is my third layer.</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
</div>

</div>

</body>
</html>

My First Layer

First Item
Second Item

My Second Layer

First Item
Second Item

My Third Layer

Click here to toggle the display of the hidden list in myThirdLayer.

First Item
Second Item

CSS