How to Make a Left Column CSS
Web developers use Cascading Style Sheets to arrange parts of Web pages into complicated layouts with headers, columns and footers. Layouts styled with CSS take "<div>" tags that group content together and give them widths and floats to create the columns seen on Web pages all over the Internet. You must first create your sidebar in HTML and style it using "float: left" to create a left column using CSS.
Other People Are Reading
Instructions
-
-
1
Open your Web page in Notepad so you can edit its code. Locate the main body of content in your code and wrap it in "<div>" tags. Give your div an ID name so you can reference it in CSS later:
<div id="content">
<h2>Content Title</h2>
<p>A paragraph of text...</p>
</div>
-
2
Below the "<div>" you created for the main content of the page, add a new set of "<div>" tags to contain your sidebar content:
<div id="sidebar">
</div>
Add any content you want to appear in the sidebar between the new "<div>" tags. This set of tags needs an ID name so you can style it in CSS. Typical sidebar content includes lists of links, "About Me" sections and small contact forms, but you can add anything you like to this section.
-
-
3
Go back to the top of the code and add "<style>" tags between the "<head>" tags if you see none there:
<style type="text/css">
</style>
Add your CSS code between the "<style>" tags. You can also place CSS code inside an external style sheet if your website already uses one.
-
4
Select both the content and sidebar divs in your CSS code:
#content {
}
#sidebar {
}
Change the names "content" and "sidebar" to the ID names you gave your divs, but keep the hash symbols as CSS needs these to know to look for ID names rather than tags or classes.
-
5
Set the width of each div:
#content {
width: 80%;
}
#sidebar {
width: 20%;
}
You can also set the width in pixel values like "200px" to give the divs fixed widths. The width of each div cannot go over 100 percent or the maximum number of pixels for your design, but you can set them below 100 percent to create room for margins or padding.
-
6
Add the "float" property to the sidebar div to make it display next to the content div rather than below. Set "float" to left when you want to place the sidebar on the left side of the content:
#sidebar {
width: 20%;
float: left;
}
-
1
