• Locked
No replies
Wed, 2020-02-05 09:50
revaudio
revaudio's picture
Offline
newbie
UK
Last seen: 3 years 6 weeks ago
UK
Joined: 2020-01-31
Posts: 1
Points: 2

We want the sidebar at the side of the main content but at the moment it is displayed beneath.

our code:

<html>
    <head>
        <title></title>
        <style type="text/css">
body, #perimeter, nav, main, #sidebar
{
    display: block flex;
}
body, #perimeter, #sidebar
{
    flex-direction: column;
    align-items: center;
}
nav
{
    justify-content: center;
}
#content
{
    flex: 1 1 auto;
}
#sidebar
{
    flex: 0 0 auto;
}
#perimeter
{
    border: medium double lime;
    border-radius: 90px;
    padding: 90px;
}
body
{
    background-color: black;
}
main
{
    background-color: white;
}
header a
{
    color: lime;
}
nav a
{
    border: medium solid lime;
    background-color: white;
    border-radius: 1em;
    margin: 0.5em;
    padding: 1em;
    color: lime;
}
 
        </style>
    </head>
    <body>
        <div id="perimeter">
            <header>
                <a href="index.aspx"><h1>Page Title</h1></a>
            </header>
            <nav>
                <a href="forthcomingevents.aspx">Forthcoming Events</a>
                <a href="galleries.aspx">Galleries</a>
                <a href="socialmedialinks.aspx">Social Media Links</a>
                <a href="contactus.aspx">Contact Us</a>
                <a href="downloads.aspx">Downloads</a>
            </nav>
            <main>
                <section id="content">
                    <h2>Heading2</h2>
                    <h3>Heading3</h3>
                </section>
                <section id="sidebar">
                <p><img src="image1.jpg"/></p>
                <p><img src="image2.jpg"/></p>
                <p><img src="image3.jpg"/></p>
                </section>
            </main>
        </div>
    </body>
</html>

Please help!

Top
Tags: