CSS Common issues and the ways to get around them
In this suite of tutorials, we will discuss about some common challenges and pitfalls when using CSS. The tutorials are based from concrete examples, they explain the common issues with do and don’t as well as reasons why.
Audience
Coderdojo web apprentice and anybody interested in web development, with the basic knowledge of HTML and CSS.
Objective
Cover a series of common pitfalls and their remedies.
Targeted / tested browsers
- Chrome (latest)
- Firefox (latest)
- Chrome for Android (latest)
References
Common issues
Height 100%
Assume a regular full height element.
Would you expect the following markup and styles to render the .h-100 element on the full screen?
.h-100 {
height: 100%;
background-color: #cccccc;
}
<html>
<body>
<div class="h-100">Element with full height</div>
</body>
</html>
The element covers the height of its own content.
See why and how to solve the issue
Horizontal split
Assume a regular split screen 50-50.
Would you expect the following markup and styles to render the two elements side by side?
.split-50 {
display: inline-block;
width: 50%;
}
<div>
<div class="split-50">Left side</div>
<div class="split-50">Right side</div>
</div>
What is most likely to happen is the two elements will be on a separate line.
See why and how to solve the issue
Full height body with header / footer
Assume a column with a header a body and a sticky footer.
There could be many challenges to address and different ways to address them:
- full height body
- text overflowing in header / footer:
- force one line and show
... - allow text to go on a new line
- force one line and show