Achieve a full-height sidebar design similar to Wordpress using flexbox functionality

Working on a web app that features a tools sidebar with a fixed width requirement amidst fluid content.

Explored using flexbox to achieve this, but encountered an issue where the main box only takes the height of the viewport instead of the entire site's content. Here is what was attempted:

Link to Code Example

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Holy Grail</title>
        <style>
            * {
                <!-- Styling rules -->
            }

            html, body {
                <!-- CSS for html and body elements -->
            }

            article, aside {
                <!-- Specific styling for article and aside elements -->
            }

            <!-- Additional styles defined in the code snippet -->
        </style>
    </head>
    <body>
        <section class="main">
            <!-- Main content layout structure -->
        </section>
    </body>
</html>

An attempt was made at fixing the sidebar position, which did not yield the desired result resembling a Wordpress sidebar. Any recommendations or solutions would be greatly appreciated!

Answer №1

Your styles have been successfully corrected. The issue was that you had mistakenly used display: flex for the <body> tag, which was preventing it from expanding based on its content.

Important Update

To resolve this, I simply removed the following code:

body {
    display: flex;
    flex-direction: column;
}

Here is the Updated Snippet:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Holy Grail</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                border: 0;
                vertical-align: baseline;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                list-style: none;
                outline: 0;
            }

            html, body {
                width: 100%;
                height: 100%;
                font: normal 18px/120% Helvetica,Arial,sans-serif;
            }

            article, aside {
                padding: 0;
                margin: 0;
                border-radius: 0;
            }

            header, footer {
                height: 100px;
            }

            .main {
                display: flex;
                flex-direction: row;
                flex: 1;
                align-self: stretch;
                min-height: 100%;
            }

            article {
                flex: 5;
                background-color: #EEE;
            }

            aside {
                background-color: #333;
                flex: 1;
                color: #CCC;
                width: 360px;
            }

            .margin {
                padding: 25px;
            }

            h1 {
                margin-bottom: 25px;
                font-size: 24px;
                font-weight: bold;
            }

            p {
                margin-bottom: 14px;
                line-height: 140%;
            }
        </style>
    </head>
    <body>
        <section class="main">
            <aside>
                <div class="margin">
                    <h1>Aside</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                </div>
            </aside>
            <article>
                <div class="margin">
                    <h1>Article</h1>
                     
                   <!-- Additional article content goes here -->
                   
                </div>
            </article>
        </section>
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Design: Seeking a layout feature where one cell in a row can be larger than the other cells

To better illustrate my goal, refer to this image: Desired Output <\b> Currently, I'm achieving this: current output Imagine 7 rows of data with two columns each. The issue arises in row 1, column 2 where the control needs to span 5 row ...

What is the best method for passing parameters from HTML to AJAX within code?

My project involves working with Flask, HTML, and Ajax. Here is the HTML code snippet: <script type=text/javascript> $(function() { $('a#calculate').bind('click', function() { $.getJSON('/_add_numbers&ap ...

How can I achieve a smooth background-image transition in Firefox?

Currently, I'm on the hunt for a substitute for this specific code snippet: "transition:background-image 1s whatever" This particular transition only seems to function on webkit browsers, leaving Firefox users out of luck. I experimented with utili ...

Potential image positioned to the left of a detailed description

A Meteor client template helper contains an array of objects {image: url, label: description}. The URL can either point to a valid image file in the public directory or be the string 'non'. The description can range from a few words to several ...

Navigating to two separate webpages concurrently in separate frames

I am working on creating a website with frames, where I want to set up a link that opens different pages in two separate frames. Essentially, when you click the link, one page (such as the home page in a .html file) will open in frame 1 on the left side, ...

Request financial data from AlphaVantage using PHP

I'm currently working on utilizing the alphavantage API to retrieve currency exchange information. In order to obtain the desired data, I am using the following query URI: https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_cu ...

utilizing Javascript to insert a class with a pseudo-element

Witness the mesmerizing shining effect crafted solely with CSS: html, body{ width: 100%; height: 100%; margin: 0px; display: table; background: #2f2f2f; } .body-inner{ display: table-cell; width: 100%; height: 100%; ...

Create a CSS style to set the background with a half height positioned behind the

I am looking to create a div with a background and overlay effect. Here is what I have done so far: I want it to look like this: body { background: blue; } .wrap { height: 300px; width: 600px; margin: 0 auto; background-color: #000000; } .b ...

Is there a way to exclusively show the browser name and version while excluding any supplementary details with 'HTTP_USER_AGENT'?

I am trying to modify my script to only display the browser version and name using 'HTTP_USER_AGENT'. I want to ensure that my script still covers all modern browsers in case someone helps me and specifies the code only for the Safari browser. C ...

The theme font fails to take effect on the paragraph

As a novice in HTML and CSS, I attempted to use the "Roboto Condensed" font from a WordPress theme for my entire site. Although I successfully implemented this custom font for a menu, I encountered difficulties when trying to apply it to paragraph elements ...

Failure occurred when attempting to link and display on the page container

I have created a simple app using jQuery Mobile. At some point in the app, I include the following code: <a href="test_es.html" data-role="button">Start!</a> This code snippet loads a new HTML file that contains several jQuery Mobile page ...

JavaScript - Delayed Text Appearance with Smooth Start

I want to create a landing page where the text appears with a slight delay - first, the first line should be displayed followed by the second line. Both lines should have an easing effect as they appear. Below is a screenshot of the section: https://i.sst ...

Tips for keeping a div element at the top of the page

I am looking to have a div stick to the top of the page when someone scrolls down When the page is scrolled, the green div with class stickdiv should automatically stick to the top var left = document.getElementsByClassName("stickdiv"); for( var i = 0; ...

Is it necessary to have all font-family files for a font to function properly?

Let's say I have a font pack like Font-Awesome, which provides me with various file types such as eot, woff, woff2, or svg. From what I understand, we only need one file for each specific font weight to function properly. My question is: If we only i ...

Use CSS and JavaScript to create a visually appealing and interactive tree structure. Give the tree a dynamic design

I have been experimenting with CSS and JavaScript to create a dynamic graph based on a data table. You can view the graph that I need to replicate using CSS and JavaScript in this PDF. The example provided below showcases what I am attempting to achieve, a ...

What could be causing the position sticky to not function properly in my script?

Can someone help me troubleshoot an issue with the TopOptions image and component sticking to the top of the page? {!categorySearch && ( <div className="max-w-2xl mx-auto z-40 relative overflow-x-hidden font-metropolis_semibold" ...

Tips for ensuring all images are the same size within a div element

https://i.stack.imgur.com/EkmWq.jpg Is there a way to make sure all the images fit perfectly inside their respective border boxes without appearing stretched? I've tried setting fixed height and width within a div, but they always end up looking off. ...

Steps to align table next to the paragraph tag

I am facing an issue trying to align a table inline with the p tag in my HTML code. I have attempted to make minimal changes to achieve this, but it is not working as expected. Here is the code I have tried: <p>ABCD</p> <table style = displ ...

Label text facing positioning difficulties

Hey there! I have a goal in mind: https://i.stack.imgur.com/bnso9.png This is what I currently have: http://codepen.io/KieranRigby/pen/QyWZxV. Make sure to view it in "Full page" mode. label { color: #6d6e70; bottom: 0; } .img-row img { width: 10 ...

Alter attribute with an impact

I am looking for a solution to switch the image source using attr, while also incorporating a fade effect in the process. I have attempted to implement one of the suggestions from another post, but it is not producing the desired outcome. Current Appearan ...