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,
Let's create two new selectors that will share the display and vertical-
alignment property styles.
Click here to view code image
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
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