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
widths.
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.
