How to Create a 5 Column Tabless CSS Website
- 1). Open your HTML file in any editor. HTML is edited in plain text, so an editor as simple as Notepad allows you to create a CSS web page.
- 2). Create your div tags. Each div tag you create represents a column in your page. Since the objective is to make five columns, you need five div tags:
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> - 3). Create the div "wrapper." The wrapper contains each of the columns on your page. The following code wraps the columns into a main div:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div> - 4). Place some content in your CSS columns. You eventually insert images and content into your columns, but this allows you to test your column layout and view it in the browser:
<div>
<div> Column 1 </div>
<div> Column 2 </div>
<div> Column 3 </div>
<div> Column 4 </div>
<div> Column 5</div>
</div> - 5). Save your HTML file and open it in the web browser. View your new HTML layout to test the code.