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 now without height, and that class elements are selected using "." 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 implementing "display: inline-block":
One more thing: we still need to revisit the HTML file to ensure that there are no whitespaces between these column elements. Annoyingly enough, these spaces register as a real pixel in between these elements and can introduce unwanted gaps between the boxes. Below are two methods you can use to eliminate the gaps:
The result is a group of
<div> elements that closely resemble the original design: