HTML and CSS Reference
In-Depth Information
Inline-Block in Practice
Let's take a look at our three-column example from before. We'll start by keeping our
HTML just as it is:
1. <header>...</header>
2. <section>...</section>
3. <section>...</section>
4. <section>...</section>
5. <footer>...</footer>
Now instead of floating our three <section> elements, we'll change their display values
to inline-block , leaving the margin and width properties from before alone. Our
resulting CSS will look like this:
Click here to view code image
1. section {
2. display: inline-block;
3. margin: 0 1.5%;
4. width: 30%;
5. }
Figure 5.8 A three-column page layout using inline-block elements without removing
any unnecessary white space
Unfortunately, this code alone doesn't quite do the trick, and the last <section> element
is pushed to a new row. Remember, because inline-block elements are displayed on the
same line as one another, they include a single space between them. When the size of each
Search WWH ::

Custom Search