How to Make Columns in CSS
CSS (Cascading Style Sheets) is a computer language used to define how HTML elements appear in a web browser. CSS makes it simple to create consistently-styled design elements throughout a website by defining a style class to which many HTML elements can be linked. Columns can be created by defining the style elements of an outer container and two or more inner containers in CSS. The containers are then created in HTML and linked via the "ID" property to the CSS.
Other People Are Reading
Instructions
-
-
1
Download "AceHTML Freeware" by clicking the link located in the "Resources" section of this article. Double-click the downloaded file to start the installation process.
-
2
Click the "Next" button then read the license agreement. Put a check in the checkbox and click the "Next" button. Click "Install" to confirm the installation location and install the program. Uncheck "Make VMN.net my start page", then click "Finish".
-
-
3
Double-click the "AceHTML Freeware" icon on your desktop to open the program. Click "OK" to bypass the tip of the day. Click on the "File" menu at the top of the program window and select "New". Select "HTML Document" and then click the "OK" button.
-
4
Click the mouse cursor to the right of the <TITLE> and </TITLE> tags to place your cursor there and press the ENTER key to create a new line. Type in "<style type="text/css">" and press the ENTER key. This creates an area where we can define DIVs that will be added to the HTML below in the following steps.
-
5
Type in "#wrap { width:600px; }" and press the ENTER key. This defines a container called "wrap" and specifies a width of 600 pixels.
-
6
Type in "#column1 { width:280px; background:#c99; float:left; }" and press the ENTER key. This defines the first column container and specifies a width of 280 pixels, a background color, and that we want the column to float to the left side of the container we put it into.
-
7
Type in "#column2 { width:280px; background:#9c9; float:left; }" and press the ENTER key. This defines the second column container and specifies a width of 280 pixels, a background color and that we want the column to float to the left side of the container we put it into. In this case, since we will be adding both column containers to the same main container called "wrap", the column containers will be rendered next to each other.
-
8
Type in "</style>" and press the ENTER key. This closes the style tag we opened in Step 4.
-
9
Click on the blank line between the <BODY> and </BODY> tags to place your cursor there. Type in "<div id='wrap'>" and press the ENTER key. This creates the first part of the main container and names it "wrap".
-
10
Type in "<div id='column1'> Here is some text for column 1. </div>" and press the ENTER key. This creates a container and some sample text for the first column, named "column1". The ID property is used to link this container back to the CSS code we created in step 6, where we defined the width, color and float position of the "column1" container.
-
11
Type in "<div id='column2'> Here is some text for column 2. </div>" and press the ENTER key. This creates a container and some sample text for the second column, named "column2". The ID property is used to link this container back to the CSS code we created in step 7, where we defined the width, color and float position of the "column2" container.
-
12
Click on the "File" menu at the top of the program window and select "Save". Choose a name for this HTML document, specify a save directory and click the "Save" button.
-
13
Click on the "Viewer" tab at the bottom of the program window. This tab allows you to preview the HTML and CSS that you have written. The HTML document you see before you should display two columns each with text in them, placed next to each other. You may erase the sample text or continue adding text and images to the columns and they will expand in height to accommodate the additional content.
-
1
References
Resources
- Photo Credit ANSI image by DBX60 from Fotolia.com
