HTML and CSS Reference
In-Depth Information
1.
For the Styles Conference website, we'll create a three-column reusable layout us-
ing inline-block elements. We'll do so in a way that allows us to have three
columns of equal width or two columns with the total width split between them,
two-thirds in one and one-third in the other.
To begin, we'll create classes that define the
width
of these columns. The two
classes we'll create are
col-1-3
, for one-third, and
col-2-3
, for two-thirds.
Within the grid section of our
main.css
file, let's go ahead and define these
classes and their corresponding widths.
1.
.col-1-3 {
2.
width: 33.33%;
3.
}
4.
.col-2-3 {
5.
width: 66.66%;
6.
}
2.
We'll want both of the columns to be displayed as inline-block elements. We'll
need to make sure that their vertical alignment is set to the
top
of each column,
too.
Let's create two new selectors that will share the
display
and
vertical-
alignment
property styles.
1.
.col-1-3,
2.
.col-2-3 {
3.
display: inline-block;
4.
vertical-align: top;
5.
}
Looking at the CSS again, we've created two class selectors,
col-1-3
and
col-2-3
, that are separated with a comma. The comma at the end of the first se-
lector signifies that another selector is to follow. The second selector is followed
by the opening curly bracket,
{
, which signifies that style declarations are to fol-
low. By comma-separating the selectors, we can bind the same styles to multiple
selectors at one time.
3.
We'll want to put some space in between each of the columns to help break up the
content. We can accomplish this by putting horizontal
padding
on each of the
columns.
This works well; however, when two columns are sitting next to one another, the
width of the space between them will be double that of the space from the outside
Search WWH ::
Custom Search