CSS box model once and for all

From time to time, I forget the workings and attributes of the CSS box model. So, this time, I decided to write a blog post summarizing it and highlighting its logic. I hope this will make it easier to retain it.

In order to understand the box model, this post will be broken down in several sections relating to the model attributes. First, we’ll go over the existing types of boxes; then, how they are sized, positioned and floated; finally, how to make them responsive to the screen size.

Types of boxes

With the display attribute we can set the type of box we are using, for example

This div has attribute display: block. The borders are in black, so you can see that it stretches as far as it can to the left and to the right.

This one is a display: inline element. Its contents are wrapped inside a box that can be inlined with other inline elements.

With a display: none style, the element will not be rendered at all. This is different from the visibility: hidden style, in which the elements exist, take space, but are not shown.

Box sizing

The sizing of the box is defined with the width and height attributes. By default, this measure is of the content part only, so additional padding, border or margin add up to the total size of the box. This means that if you want the whole box (content + padding + border + margin) to fit a precise space, you need to do some math.

An alternative to this is to set the sizing measure to box-sizing: border-box. In this mode, the width and height defined will be the sum of the content, padding, border and margin. For example:

This box has width: 300px and
box-sizing: content-box (the default)
As you can see, the content measures 300px, but the border occupies an additional 10px
This other div has width: 300,
but box-sizing: border-box
So 300px is the measure of the entire box!

Since this is a recent addition to the CSS standard, some browser may require specific css tags to switch to box-sizing:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

To apply this to all elements, just set the CSS style for all elements:

* {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

Box Positioning

There are 4 attributes for positioning:

  • position: static the element follow the flow of the page and is considered to be not positioned – as a visual reminder, it’s flagged in red. The other attributes, in green, are considered positioned.
  • position: relative the element is translated, with the attributes left, right, top and bottom, relative to where it would be positioned. The element is translated, but it still occupies the original space in the document. In this sense it can overlap other elements and leave blank gaps in the document, as we will see in an example below.
  • position: absolute positions absolutely in relation to the parent box, which must have a positioned attribute (the green ones). It can be positioned using the left, right, top, bottom attributes.
  • position: fixed the element is fixed to the viewport. The box can be positioned using the left, right, top, bottom attributes.

In order to illustrate the types of positioning, some examples:

  • A relatively positioned div
a positioned div (position: relative)
a translated position: relative div overlapping the one above and leaving a blank space where it was located
another positioned div (position: relative)

  • A absolutely positioned div
a positioned div (position: relative)

a div absolutely positioned (position: absolute)

A fixed div… check the bottom right of your screen 😉

I’m a position: fixed div

Floating boxes

An element can be “floated” in order to wrap text around it:

I’m float: left !

In order to demonstrate the text wrapping, I’ll write a text that is long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long.
As you can see, it wraps around the float!

The problem with the floats is that the following div is still locked on the float:

I’m floated!

This div respect the float and wraps nicely around it.

This next div is locked on the float…

If the next div must break free from the float and appear after the floated element, it suffices to clear: left | right | both the float:

I’m floated!

This div respect the float, but the next one will break free from the float and appear below.

I’m a clear: left div, free from the float!

This float thing can be used to build a responsive web site. Try to resize the screen to see what happen to these divs:

float: left – A
float: left – B
float: left – C

Since they are floated, when there’s no more horizontal space, they are stacked on top of each other. Pretty nice, hum? But there’s more to responsiveness…

Responsive layout

The layout of the page can be changed depending on the size of the viewport using @media queries. When the query is valid, it is triggered, applying the designated styles. For example a menu on the left

Could be stacked on the top of the section when the screen becomes too small:

This is achieved with the following CSS

@media screen and (min-width: 600px) {
   nav     { float: left;
             width: 25%;}
   section { margin-left 25%}

@media screen and (max-width: 600px) {
   nav li  {display: inline }

The first block is applied when the viewport width is at least 600px. It aligns the nav to the left and the section to the top. If the screen size is under 600px, the first block of styling is not applied and the second one is. In this case, the divs will follow the usual behavior of occupying all the horizontal space and being one after the other.

Final Words

I believe this short summary could be used as cheatsheet when in doubt about the box model. I hope you enjoyed it.

A final remark, there’s an upgrade to the box model that is under development: the flexbox. This will be the subject of another post.

Hot or Cold? The 5º Celsius rule to know what to wear

If you are like me, you already found yourself in the uncomfortable situation of not knowing which clothes to bring for a trip, or what to bring for the day, if you live in a region with high temperature variations. For this, I have devised an empirical method, which I have called “the 5º Celsius rule”. It has been tested for the past 5 years and proved to be quite effective.

A caveat here: since I’m the only male subject to this model, there’s no statistical validity, so you’ll probably need to adapt it according to the workings of your body. For example, I guesstimate that for females, it would be the “4º Celsius rule”.

Anyway, here’s the 5ºC rule:

“You are at 25ºC, wearing shorts and T-shirt. For each decrease of 5ºC, you add another piece of clothing”

This rule is for a condition without any wind, so in more details:

  • 25°C : You are wearing shorts and T-shirt
  • 20°C : You either put some pants or a sweater
  • 15°C : You put the one missing from above (pants or sweater)
  • 10°C :  You’ll need a coat
  • 5°C : Gloves and a tuque (knit cap)
  • 0°C : Long underwear
  • <0°C : Get away from this place! (LOL)

So there you have it. Now you know how to fill your suitcase for your next trip =)

There’s no escaping the encoding: a quick explanation on Unicode vs. Encodings

TL;DR: there is no “plain text”, for every string or text file, one must know how it is encoded. There are two distinct concepts that must be emphasized: 1) Unicode, which is a set of character mapped to Code Points (usually represented by U+0000) and 2) Encoding, which is a map from the Code Points to the bit representation inside the computer (usually the bits are represented as hexadecimal, in the format 0x0000). If a text is decoded with the wrong “encoding”, characters may be misspelled or the ones that are missing are marked with question ??? marks.

Note: This is a big overview on encoding, focusing on its applicability.

Sooner or later, it always hit you: file encoding. It’s everywhere, in d3js, JavaScript, CSVs, Windows <=> Linux compatibility, Django, source files. There’s no escaping the encoding (pun intended).

I’ve always dreaded encoding issues, mainly because I’ve never really put an effort to understand it. If you are like me, most of times, we just figure out the code the fix the issue and move along.

But that rock is always on our path, making us trip at every pass, perhaps a change in perspective, it’s what it asks (nice accidental rhyme…). So what I’m proposing is to include this in the development process. Knowing the encoding is a pre-req every time we are working with strings/text, as Joel mention “It does not make sense to have a string without knowing what encoding it uses”

By turning this into a habit, we won’t be bitten back by a library that changes the encoding in the middle of our pipeline, or when our software scales to other languages. But first, we must understand a bit about this messy terms: Unicode, character set, UTF-8, Latin, etc.. Since images are a good way to represent ideas, here’s my take:


There are two different concepts that are usually blended together 1) Unicode which is a character set and 2) Encoding which is the bit representation of the character inside the computer.

There are two different concepts that are usually blended together: Unicode and Encoding. The Unicode Standard is a character set, an attempt to list all available characters in all the different languages. Its aim is to take into account every different letter, sign and symbol that exists… everything that people thought was necessary to represent their languages in the computers. Therefore there is no “Unicode encoding”, it’s just a set of characters.

In order to reference the symbols from Unicode, each one is mapped to a Code Point, which is usually represented in the U+0000 format. So for every symbol there is one Code Point, as can be seen on the examples of A..z, é, ã, à.

The other concept is the Encoding, which is the mapping between the Unicode character (Code Point) and it’s bit representation inside the computer. As you can see in the three different encoding examples (UTF, ISO-8859-1 Latin and ASCII), characters may have different bit representation.

Therefore, when a string or a text file is represented in the computer, it uses a specific encoding. Each symbol/Code Point is mapped to its bit value. Usually the encodings support a subset of the Unicode symbols, so if a text is decoded with the wrong “encoding”, characters may be misspelled or if they are missing, they may be marked by question ??? marks.

That’s why it’s so important to know the encoding in question: having the text or a string is just half of the story.

Some tools for poking at encoding

A tool in Linux that can be useful to poke at the file encoding and check its MIME is

$ file -i <file>

To convert to another encoding there is

$ encode [CHARSET] <file>

Dynamic vs. Static Typing

TL;DR: I’m sharing my view on Static vs. Dynamic typing after watching the Programming Languages Course @ Coursera. In the table below the key highlights:

Static typing Dynamic Typing
The object’s types are checked by the type checking system before the program is run The program is run without any type validation, it’s the developer’s burden to code the checking for when the program is executing (runtime)
At every part of the program the type of the objects used are known, so one’s assured that the right type of objects are being passed in the right places The type of the objects are known only at runtime. So if a wrong object type is being used, it will only show up during execution as a runtime exception.
The structure of the program is somewhat rigid, since a type must be defined for everything that is used Dynamic typing languages are more flexible, since you do not need to respect the type system
Changes in the program’s types structure are flagged by the type checking system and must all be corrected before running the program. Propagating changes in the type structure is responsibility of the developer, but subparts can be run before all the changes are implemented.

A few times I’ve tried understanding Dynamic vs. Static, but I never quite grasped it. I believe I didn’t get it because the mental model I was using wasn’t in line with what the writer had on it’s own, so we weren’t communicating on the same abstraction level.

It was during the Programming Language Course @ Coursera (a course that I strongly recommend if you don’t have a formal CS degree like me), that the professor, Dan, explained it in a way that finally made sense to me. In case there are other people wandering around, struggling to understand it, here’s my take on the subject:

  • Static Typing: it means that the types are/must be defined before the program executes (in a “static” environment). This done automatically by the type checking system, in which the object’s types are known at every line of the code. Therefore, before the program is even executed, there are no worries that there is a different than expected object being passed around. For example, if there is an object Foo being passed to a function, where an Array was expected, the type checking would fail before the program even start running. On the other hand in …

  • Dynamic Typing: there are no checks before the program is run. Any object type can be passed anywhere, provided that the syntax of the language is respected. For example, the if-then-elses parts must be in the correct order, but the language doesn’t care if there is a non-bool in the “if” part, or if the return types from the then/else branches are different. This means that in the code, objects of different types can be passed around without any restriction or error. The burden of type checking is passed to the developer.

    In case there are objects being passed with different types than expected, like in the previous example, it will be only at runtime that an exception will be thrown and the developer will be aware of the error. Since there’s no type checking system to watch over one’s shoulder, usually there are helper functions, like “is-of-type-X?” or similar, that will do the checking while the program is running (hence “dynamic” typing).

Spreadsheets and Excel – the “open source” modelling tool

In my life I had alternated periods of time in which I used Excel. I always wondered why such a simple tool has became so successful among people and companies. I was struck with the idea that a spreadsheet is an “open source” modelling tool.

The building block of the spreadsheets is very simple: just some cells in which you type formulas. The nice thing about this – macros apart – is that whatever is being calculated, you can take a peek inside it. In this way, you can walk your way through the document and understand every detail of what’s being modeled.

Other modelling softwares are usually more powerful, but they require the user to study and have deeper knowledge of the tool. The user is required to understand the inner workings of each functionality and each command. It’s not just “open document, start exploring”.

Moreover, the cells enforce the Functional paradigm, so that a formula contains reference to other cells only. There is no concept of state, no “for” loops, no local variables that you have to store in your brain to understand what’s happening.

Another point is that there is a limited set of functions and operations that one can use. This narrows the complexity the model can have. It either must comply with what’s available – and eventualy trade off a better quality model for simplicity – or be modeled elsewhere, in more powerful tools such as Matlab. In this sense, a spreadsheet is a threshold for model simplicity.

So let’s praise the spreadsheets for their simplicity and success!

Clojure Pedestal: a real-time webapp library, not a Web Framework

One of the difficulties when choosing among frameworks or libraries is to understand what does the framework or library can, can’t or requires lots of effort to do. I’m currently settling for a technology to develop a small scale website. Since I’m fond of Clojure, I’ve heard some fuss over Pedestal. I decided to study it and give it a try.

For starter, some people call it a “Web Framework”, but after reading about it, I go along with one of its authors, Tim Ewald, who says it’s more of a library. (You can hear him speaking about it on Pedestal Podcast at 5:05). This clarification is really enlightening, for you should not expect Pedestal to be a fully featured CMS system with database integration, etc. etc., such as Django or RoR.

So what is Pedestal?

Pedestal is a Clojure tool to build internet applications requiring real-time collaboration and targeting multiple platforms. It provides a clean architecture for creating large, interactive, single-page applications in the browser.

In other words, the library empowers one to create interactive web-apps for multiple users. This is achieved through a cleverly designed message queuing system that transforms the model and renders a new view to the users:


Overview of Pedestal inner-workings: users send message to the back end to transform the model. The messages are queued and applied to the model. Rendering function are then emitted to update the View.

This diagram illustrates the overall workings of the library. The users send their transformation messages to the back-end service. These messages are then queued and applied to the Info Model. Then rendering instructions are emitted so that the View is updated.

The library has additional functions to implement business logic when transforming the Model Info . For additional information see Derived Data and Continue Functions .

Bottom line is that Pedestal is not a Web Framework, but a powerful Clojure/Clojurescript library to tackle real-time web application with users interactions.

Summary for Configuring Linode & Tomcat7 + Oracle Java

This is a summary on how to secure your freshly booted Linode Debian distro and install Tomcat7 on top of oracle JVM.

Note: this is mostly a remainder to myself on how to do this, it contains information from multiple sources. Perhaps I have mixed up the order of some commands. If you have any suggestions or comments, feel free to do so =)

1) Setting you hostname

At your first login, you should ssh as root. Let’s define a beautiful hostname for us

# echo "plato" > /etc/hostname
# hostname -F /etc/hostname

The second command tells the system to read the hosname from the -(F)ile.

2) Add you hostname to the list of know host in

# nano /etc/hosts

Add the following line plato

3) Set your timezone with

# dpkg-reconfigure tzdata

4) Check for upgrades

# apt-get update
# apt-get upgrade --show-upgraded

5) Create user alternative to root

It’s good practice to use the system with another user, but root. Let’s add it with the following command (it should prompt for additional information):

# adduser example_user

Let’s add the sudo application, so we can apply root commands while logged as the alternative user:

# apt-get install sudo

Not let’s (a)ppend the user to the sudoers (G)roup, so he can use sudo :

usermod -a -G sudo example_user

Now let’s

# logout 

and ssh back in with new user.

6) Configure SSH with key authentication

SSH with key is much more secure, for it drastically reduces the risk of having your system invaded by brute-force. So let’s create a key on your local machine:

$ ssh-keygen

It generated the keys in the ~/.ssh folder, let’s send our public key to the server with:

$ scp ~/.ssh/id_rsa.pub example_user@123.456.78.90:

Now ssh back into the server and set your key as authorized keys:

$ mkdir .ssh
$ mv id_rsa.pub .ssh/authorized_keys

Your key must have specific and secure permissions: be yours and read-only for you:

$ chown -R example_user:example_user .ssh
$ chmod 700 .ssh
$ chmod 600 .ssh/authorized_keys

7) Disable ssh with password

Now that we stored our key, let’s disable password login:

$ sudo nano /etc/ssh/sshd_config

by setting

PasswordAuthentication no
PermitRootLogin no

Finally, let’s restart the service:

$ sudo service ssh restart

8) Creating firewall rules

Ok, we’ve set login only with priv-pub-keys, now let’s setup the firewall. First let’s (L)ist the current rules:

$ sudo iptables -L

Let’s create a file with the rules

$ sudo nano /etc/iptables.firewall.rules

and add the following basic rules:


# Allow all loopback (lo0) traffic and drop all traffic to 127/8 that doesn't use lo0
-A INPUT -i lo -j ACCEPT

# Accept all established inbound connections

# Allow all outbound traffic - you can modify this to only allow certain traffic

# Allow HTTP and HTTPS connections from anywhere (the normal ports for websites and SSL).
-A INPUT -p tcp --dport 80 -j ACCEPT
-A INPUT -p tcp --dport 8080 -j ACCEPT
-A INPUT -p tcp --dport 443 -j ACCEPT

# Allow SSH connections
# The -dport number should be the same port number you set in sshd_config
-A INPUT -p tcp -m state --state NEW --dport 22 -j ACCEPT

# Allow ping
-A INPUT -p icmp -j ACCEPT

# Log iptables denied calls
-A INPUT -m limit --limit 5/min -j LOG --log-prefix "iptables denied: " --log-level 7

# Drop all other inbound - default deny unless explicitly allowed policy


Notice that I’ve opened port 8080, which is Tomcat’s default. Let’s active the rules

$ sudo iptables-restore < /etc/iptables.firewall.rules

and double check by (L)isting them again:

$ sudo iptables -L

Let’s create script to recover iptable when system restarts

$ sudo nano /etc/network/if-pre-up.d/firewall

and add script

/sbin/iptables-restore < /etc/iptables.firewall.rules

and install Fail2ban, which will block recurrent failed logins from the same IP:

$ sudo apt-get install fail2ban

9) Installing Oracle Java 7

If you want to replace openjdk by the Oracle Java, I recommend using webupd8team repo – it’s easier to update. First remove the jdk you’ve got:

$ sudo apt-get remove openjdk-7-jdk

There is this small tool I like for managing repos. It set up the /etc/apt/sources.list correctly and downloads the key:

$ sudo apt-get install python-software-properties

So let’s add webupd8team repo, update the packages and install Oracle Java:

$ sudo add-apt-repository "deb http://ppa.launchpad.net/webupd8team/java/ubuntu precise main"
$ sudo apt-get-update
$ sudo apt-get install oracle-{java7,jdk}-installer

10) Installing Tomcat

So, at last, let’s install Tomcat and start the service!

$ sudo apt-get install tomcat7 tomcat7-{examples,docs,admin}
$ /etc/init.d/tomcat7 start

If it misses the JAVA_HOME, edit

$ sudo nano /etc/default/tomcat

and modify the line


Add yourself an admin user for the tomcat

$ sudo nano /etc/tomcat7/tomcat-users.xml

by adding inside the node

<role rolename="manager-gui">
<user username="...youruser..." password="...yourpassword..." roles="manager-gui" />

and restart your engines!

$ /etc/init.d/tomcat7 restart

You can now watch tomcat at work on your http://123.456.789.123:8080/ and configure it at http://123.456.789.123:8080/manager/html

If you need to increase tomcat7 memory size:

$ sudo nano /etc/default/tomcat

and change the line for mx memory

JAVA_OPTS="-Djava.awt.headless=true -Xmx630m -XX:+UseConcMarkSweepGC"

And that’s it! I hope this was useful to you!