From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript
Chapter 6.3: Display Blocks
CSS breaks the web page into boxes that are laid out based on the display property and sizing properties. This gets a bit more complicated when you place containers within other containers, which tends to be how you build out a design.
The block is your basic element. They take up the entire width of whatever element they are placed within as well as their height. Even if another block could fit beside a block, it will not and instead the next block element will be placed beneath the first one. While it is possible to put blocks inside of blocks, the embedded block will still try to take whatever width is available in the new block even if it is not using it, such as below where we have a block with a 50% width and one with a 25% width. Even taking padding into account, the blocks could fit beside each other but won’t.
<div style="padding:20px; width:50%; background:green">
This is 50%
</div>
<div style="width:25%; padding:20px; background:blue; color:yellow">This is 25% but doesn't show on same line!</div>
</div>
In order to have boxes beside each other, we need to set the display type to be inline. The idea here is that this is for contents that appear inside a block as part of the text. Even though we use div tags to be blocks, nothing is stopping us from changing the div tag to use display:inline, which will make the div tag act just like a span.
The problem with inline blocks is that they fit within the line, which makes sense as they are in-line elements. This means that the width and height of the object is ignored. Any padding is put in the line with it overflowing above and below the line.
<div style="display:inline; background:green">
This is a div but...
</div>
<div style="display:inline; background:yellow">
it acts like a span...
</div>
<div style="display:inline; background:blue; color:yellow">because the display attribute determines layout.
</div><br>
<p>The problem is they take the size of their content.</p> <p>As you can see, this means that the margins overlap.</p>
<div>
<p>Here is some text with spans of
<span style="background:RGBA(0,255,0,50%); padding:2em; margin:1em">Green</span> and
<span style="background:RGBA(255,255,0,50%); padding:2em; margin:1em">Yellow </span>
</p>
<p>Notice the top/bottom margins are collapsed and padding goes outside of span box.</p>
<p>The width and height isn't used</p>
<span style="background:green; width:50%; height:50%">Green width/height 50%</span>
<span style="background:yellow; width:50%; height:50%">Yellow width/height 50%</span>
</div>
</div>
The problem is they take the size of their content.
As you can see, this means that the margins overlap.
Here is some text with spans of Green and Yellow
Notice the top/bottom margins are collapsed and padding goes outside of span box.
The width and height isn't used
Green width/height 50% Yellow width/height 50%It would be great if we could have both the block’s solid layout properties as well as the ability to be placed in-line with other elements. As it happens, we have the inline-block display option. It has the features of a block but if there is room, it will allow other elements on the same line.
<div style="display:inline-block; background: green; width:48%; padding:5px">
Green block that can have a large amount of text in it but even so the text will fit within the 49% bounds that were specified and will even let you have something beside it.
</div>
<div style="display:inline-block; background: yellow; width:48%; padding:5px">
Yellow block that can have a large amount of text in it but even so the text will fit within the 49% bounds that were specified and will even let you have something beside it.
</div>
</div>
While this sounds like it should solve our problems, it doesn’t as it, like most of CSS, is very finicky. If you are using a mix of measurement types, such as % and Ems, then there will be a point where the different padding and margins and display sizes end up working out to over 100 percent. This can be an advantage as you may want the display to become a single column. Working out the numbers to do this is a bit tricky, so to handle the work for you there are additional advanced display methods. The first one we will be looking at is the flex box.
Chapter contents
Chapter 6 Contents
6.1 Layout Cheat Sheets
This chapter's summary cheat sheet.
6.2 The Layout problem
Why layout is complicated for web pages.
6.3 Display blocks
The basic display types.
6.4 Flexible Boxes
A box that contains other components and sizes them to fit the available space.
6.5 Grid
A flexible grid where you can lay out your design.
6.6 Grid Templates
Using templates to make laying out components in a grid easy.
6.7 Multiple columns
Using the columns attributes to easily allow for multiple columns.
6.8 Floating
Having images (or other blocks) have text wrap around them.
6.9 Position
There are other ways of placing elements by using the position attribute.
6.10 Media Queries
Altering CSS based on the properties of the device the page is being rendered on.
6.11 Project: Tic-Tac-Toe
The project for this chapter.
6.12 Project Solution
Solution for this chapter's project