HTML and CSS Reference
In-Depth Information
Clearing floats
We are positioning the image elements on the left-hand side of the artists' names.
We do this by floating the images to the left. Luckily for us, we do not have any
content that follows the container with floated elements. If we did, then that content
would be overlaid on top of the floated element. You can prevent this from occurring
by setting a class called clearfix on the parent container of the floated elements.
In our case, to ensure our floated elements never trigger this behavior, we shall add
the clearfix class to the parent element of the artist image element:
<a class="t-media--row clearfix" href="#">
To learn more about how the clearfix class works, read about it in Appendix , You
Are an Expert, Now What?
Now that we have taken care of the basic essentials, let us apply styles to spruce
up the page itself to look more like the design we had in mind. The following code
snippet shows how to add styles to our page:
html {
background: url('/img/waves-bg.png') repeat-x,
url(/img/heading-banner-back.png) 50% 100px
url(/img/bg-active.png) 50% 72px repeat-x,
url('/img/bg.png') #e7dcbb;
box-sizing: border-box;
margin: 0 1em;
font: 100%/1.5 georgia, serif;
body {
max-width: 80%;
margin: 0 auto;
text-align: center;
.t-tabs {
Search WWH ::

Custom Search