It is now time for us to give some structure to these <div>
elements. We purposely gave each of these elements a name (ID or class name), so that we can specify it without the risk of erroneously selecting other elements.
Refer to the following screenshot and give it a try:
The result is a series of stacked boxes:
As you can see, each ID-ed element can be selected using #
as a prefix. Note that the #container
element serves as, well, a container to all the child elements, making sure that the website has a horizontal constraint and is centred to the page via auto margin.
Let us proceed with the "grandchildren" elements under "intro" and "gallery." Note that #intro
and #gallery
are currently without any height value, and that class elements are selected using the period (.
) prefix:
Definitely not the most desirable effect: this is because we haven't specified that these elements are to be sitting next to (not on top of) each other. We can address this by applying display:flex
and align-items:start
(align to top) to our parent elements #intro
and #gallery
. We can also remove the height
properties as they will automatically stretch based on their children.
When using the new and improved Flexbox method, there is no need to eliminate pesky whitespaces between column elements. The result is a group of <div>
elements that closely resemble the original design:
https://drive.google.com/file/d/1VFdhpOjJqftwGGjcAJMuvEuru66SJKoH/view?usp=drive_link
(Updated to reflect the new flexbox approach. The old recording featuring the inline-block
approach can be found here.
(Updated October 26, 2023)
/* SKIPPING CSS RESET */
/* MAIN SECTIONS */
#container
{
width:600px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#title
{
height:100px;
background-color:pink;
}
#intro
{
background-color:lightgreen;
display:flex;
align-items:start;
}
#gallery
{
background-color:skyblue;
display:flex;
align-items:start;
}
#footer
{
height:50px;
background-color:gray;
}
/* CHILD SECTIONS */
#intro_left
{
height:200px;
width:400px;
background-color:red;
}
#intro_right
{
width:200px;
height:200px;
background-color:blue;
}
.gallery_item
{
width:200px;
height:200px;
background-color:green;
}