HTML and CSS Reference
In-Depth Information
Let's start by styling the
.movie-content
element.
.movie-content {
height: 80%;
width: 100%;
padding-bottom: 40px;
@include box-sizing(border-box);
}
There's nothing special to see here. We're just setting the
height
to be
80%
of
the screen height to accommodate for the movie header's 20 percent height.
There's also a
padding-bottom
of
40px
that allows the movie footer to sit at the
bottom and have no content appear behind it.
The block container, which holds all of the block elements, needs to be the
width of the screen × the number of elements -- the difference between the
width of each block element. This is really easy to do in SASS, as you can
create a variable to hold the width of each block element and then create an
equation to set the width of the container element, as follows.
$blockWidth: 33%;
$blocks: 3;
...
.block-container {
width: (100% * $blocks) - (100% - 33%);
...
We can now style the block and its content. This parts really simple and the only
complex thing is to ensure that the width of the block is set based on the
variable set previously. Add the following code to the
movie-content
style.
.movie-content {
...
.block-container {
$blockWidth: 33%;
$blocks: 3;
width: (100% * $blocks) - (100% - 33%);
height: 100%;
.block {
width: 33%;
float: left;
height: 100%;
font-size: 1.3em;
line-height: 2em;
