(click anywhere to close)
OPEN MENU

[CSS3] Display

category: Website | course: CSS3 | difficulty:

Until now, we’ve viewed everything as a strong and independent box with lots of space around it. But that’s not how most elements behave. Websites often have a few big containers (such as header, footer, sidebar, content), and the rest of the elements is displayed in a different way.

In the HTML5 tutorial, we made a distinction between block and inline elements when we talked about <div> and <span>, and this is the part where CSS continues on the subject. Arguably, it’s the most important property there is, because CSS is all about displaying stuff. Not surprisingly, the property to use is display.

A block-level element has a fixed size, regardless of the content. It doesn’t allow other elements next to it, and pushes those below itself. A block-level element is useful, because it is clean and consistent in behaviour, but it’s hard to work with them once you get to the details of a design.

That’s when inline elements come into play. Inline elements can’t have their width and height set – those are determined by their content and surroundings. Their placement is also determined by what’s around it, as they will try to be in line with the text or other elements.

While those two cover most cases, there will be times when you want a block element next to other elements instead of in its own space, and there’s a compromise for that: inline-block.

CSS3DisplayProperty
div {
	display:block;
}

span {
	display:inline;
}

.specialElements {
	display:inline-block;
}

Setting the property to none means the element has no effect on the layout. It doesn’t remove it from the page.

Tables

In the HTML5 tutorial, I kept telling you to keep mark up and layout separate. To make this easier, CSS has a way of simulating a tabular layout, without actually using <table> tags. This tabular layout is created by setting the display property of a group of elements to certain values.

Value

Description

table

Simulates the behaviour of the <table> element

table-row

Simulates the behaviour of the <tr> element

table-cell

Simulates the behaviour of the <td> element.

table-caption

Simulates the behaviour of the <caption> element

table-column

Simulates the behaviour of the <col> element

table-column-group

Simulates the behaviour of the <colgroup> element

table-header-group

Simulates the behaviour of the <thead> element

table-footer-group

Simulates the behaviour of the <tfoot> element

table-row-group

Simulates the behaviour of the <tbody> element

The last five are actually not that useful, as those exist in HTML5 mostly for structure and not design or layout. But the first ones can make it very easy to create a responsive design, though they can be tricky.

div {
	display:table;
}

div > div {
	display:table-row;
}

div > div > div {
	display:table-cell;
}

Extras

You can also use the value list-item to make an element look like a list item, which means it has a bullet in front and is slightly indented.

The value run-in is equal to block or inline, depending on what fits best in the context. It’s decided by the browser, which means it isn’t very consistent, and I recommend not using it.

Flexbox

The last two values it can obtain are flex and inline-flex. Those signal the start of a flexbox environment, which is a very useful but much larger topic than is necessary to discuss now. It will be elaborated on in the Flexbox chapter, much later in this course!

Overflow

The last thing to worry about now, is what to do if the content is bigger than its parent. When the content overflows the container’s dimensions, you can use the overflow property to control it. The default value is visible, which means nothing is done about it.

To hide everything outside of the box, use hidden. To make the element scrollable, use scroll.

If you want to specify different instructions for the width (x-direction) and height (y-direction), use overflow-x and overflow-y.

div {
	width:300px;
	overflow:auto;
}
CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
What does the term Inline Element mean?
A
An element that tries to stay on the same line as elements around it, but allows you to set the dimensions
B
An element that pushes other elements below it, and its dimensions can be fixed
C
An element that is as big as its content, and tries to stay on the same line as elements around it
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)