HTML and CSS Reference
In-Depth Information
This produces a more reliable lay-
out. And, as the following screen-
shots show, everything stays the
same width at different screen
640px width
800px width
1024px width
1280px width
As always with inline-block , there's the issue of letter spacing. A cer-
tain amount of trial and error was involved in arriving at those 4.665em
and 3.665em lengths. A more straightforward approach is to remove
the letter spacing as a factor by setting it to a negative value.
body {
letter-spacing: -0.5em;
header, section, article, aside,
footer {
letter-spacing: normal;
section, aside {
width: calc(70% - 4em);
aside {
width: calc(30% - 4em);
The negative letter spacing on the
body allows saner width calculations,
but then the letter spacing needs to be
explicitly set on the child elements.
Search WWH ::

Custom Search