Attempting to create a webpage with a sidebar using flexbox

HTML-CSS
1

I am trying to make a side bar using flexbox, however I can’t seem to make my side bar extend to the bottom or get my cards to start next to the sidebar. Any tips?

<body>
    <div class="title">My Awesome Website</div>
  
            <div class="sidebar">
                <div class="sidebar-content">
                    <ul>
                     <li><a href="#">Link one</a></li>
                     <li><a href="#">Link one</a></li>
                     <li><a href="#">Link three</a></li>
                     <li><a href="#">Link four</a></li>
                    </ul>
                 </div>
            </div>
        
            <div class="content">
                <div class="cards">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum aperiam commodi accusantium numquam nisi rem cum minima quaerat a laudantium perspiciatis velit aut nobis eveniet maxime, fugiat esse magni sint!</div>
                <div class="cards">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, maiores quaerat praesentium at aliquam necessitatibus sunt blanditiis. Debitis, voluptas? Saepe voluptates quam fuga qui dolores iusto aliquam culpa, facere beatae.</div>
                <div class="cards">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum ex cupiditate, et nisi nemo commodi laudantium dolore atque corporis eveniet perspiciatis, cum, repellendus a! Nisi temporibus labore a explicabo accusamus.</div>
                <div class="cards">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque nobis inventore perspiciatis. Consequuntur autem laudantium perspiciatis error aspernatur quidem ipsa, harum voluptate molestias at totam. Eveniet ex tenetur ratione iure!</div>
                <div class="cards">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum magnam numquam distinctio vero saepe recusandae iure quae? Similique sequi aperiam cupiditate molestias? Fugit dolorem ab delectus quod id veritatis illo.</div>
                <div class="cards">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore neque id voluptatibus officia, quod cupiditate omnis ad ratione explicabo quam iusto, iure laudantium illo obcaecati magnam vitae porro doloribus!</div>
            </div>
        
       
        <div class="footer">
            <p>&copy; 2024 My Awesome Website</p>
        </div>

body{
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    
}

.title{
    display: flex;
    align-items: center;
    height: 72px;
    background: darkmagenta;
    color: white;
    padding: 0 16px;
    font-size: 32px;
    font-weight: 900;
    z-index: 1;
   
    
}

li{
    margin-bottom: 16px;
}



.sidebar{
    background: royalblue;
    width: 300px;
    box-sizing: border-box;
    display: block;
    flex-direction: column;
    height: 100vh;
    flex-shrink: 0;
    padding: 16px;
    position: relative;
    z-index: 2;
}

.sidebar-content{
    position: absolute;
}





.cards{
    padding: 16px;
    margin: 16px;
    width: 300px;
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: 2px 4px 16px rgba(0,0,0,0.6);
}

.footer{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    background: #eee;
}


ul{
    margin: 0;
    padding: 0;
}

.sidebar ul li{
    list-style: none;
    display: block;
    font-size: 24px;

    
}

.sidebar a{
    text-decoration: none;
    color: white;
    font-size: 24px;
}

.content{
    padding: 32px;
    display: flex;
    flex-wrap: wrap;
}
3

Hi, thank you for taking the time to respond. I tried that however the sidebar has now shrunk and my cards however have now placed themselves vertically, but maybe my issue wasn’t clear, them being placed in a row is fine I’d just like to move it next to the sidebar if that makes sense.

5

To your main container in which both the sidebar and content are present give it property display:flex; keep the sidebar width fixed. To the .content class give flex-grow:1; by which it file the remaining space. Extend the sidebar by using height:100vh; and remove position:absolute; from .side-content.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.