How to Make Columns Extend in CSS
CSS provides you with a "width" property that lets you extend a column to a specific pixel width. CSS lets you control several columns with only one code statement. You can set up one or several columns using CSS classes. You can also set the columns' margins, padding and borders in the CSS class.
Other People Are Reading
Instructions
-
-
1
Right-click the HTML or CSS file you want to use to edit the column width. Click "Open With," then click your preferred editor. If you do not have an HTML editor, you can use Notepad to edit HTML.
-
2
Set up the CSS style. The style contains the the width in pixels. Pixel width is the global standard when sizing HTML element's width and height. For example, the width of a screen is typically 1,200 pixels, so 300 pixels is about a quarter of the screen width. Type the following code to create a new CSS style for the columns in your page:
#columnwidth {
width:300px;
}
The "columnwidth" is the name that you use in your column's tag definition.
-
-
3
Scroll down the file to the location of the column you want to extend. In the "ID" property of the column, enter the same name of CSS class created earlier. For example, the following code sets the width to 300 pixels defined in the class in Step two:
<div id="columnwidth"></div>
-
4
Save the changes and open the file in your Web browser to view the CSS changes. Notice the column extends to the pixel width you define in the CSS class.
-
1
