Aside Html Css Example

4 min read Jun 28, 2024

Aside HTML CSS Example: Creating a Side Bar for Your Website

The <aside> element in HTML is used to represent content that is tangentially related to the main content of a page. This is often used for sidebars, related content, or advertisements. In this example, we'll create a simple sidebar using HTML and CSS.

HTML Structure

First, let's set up the basic HTML structure. We'll create a div element for the main content and an aside element for the sidebar.




    
    
    Aside Example
    


    
        Main Content
        This is the main content of the page. It can be anything you want, like articles, blog posts, etc.
    

    
        Sidebar
        
            Link 1
            Link 2
            Link 3

CSS Styling

Now, let's style the main-content and sidebar elements with CSS in style.css:

.main-content {
    width: 70%;
    float: left;
    padding: 20px;
    background-color: #f2f2f2;
}

.sidebar {
    width: 30%;
    float: left;
    padding: 20px;
    background-color: #eee;
}

In this CSS:

We set the width of the main-content to 70% and the width of the sidebar to 30%.
We use float: left to position both elements side by side.
We add some basic padding and background colors for visual separation.

Result

This simple example will create a two-column layout where the main content occupies 70% of the page width and the sidebar takes up the remaining 30%. You can adjust the widths, padding, and other styles to fit your design needs.

Additional Notes

You can use different CSS layout methods like flexbox or grid for more complex sidebars and layouts.
You can customize the appearance of the sidebar with different colors, fonts, and images.
Consider using semantic HTML5 elements like <nav> for navigation menus, <article> for related content, or <section> to structure the content of your aside element.

Remember, the <aside> element is not limited to sidebars. It can be used for various related content and is a powerful tool for structuring your website content effectively.

Aside Html Css Example