Utilizing flexbox to incorporate both left and right sidebars alongside each other

I've been attempting to organize this on my own, but I'm having trouble figuring it out. I used flexbox to create a layout with a header, navigation, and a three-column section consisting of the main content area and two sidebars, one on each side. Now, I want to add another sidebar on the right, but I can't seem to make it work because I already set up the flex for the initial three columns...

To get a better idea of what I'm trying to achieve, you can view the image here

Check out the source code at www.codepen.io/enipx/details/dQmXKP

htmlcssflexbox

Answer №1

You have the option to enclose two sidebar elements within a div labeled .sidebarright

/* ===== Custom Framework Styles ===== */

html{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}

*, *::before, *::after{
box-sizing: inherit;
}

body{
background-color: #fdfafb;
height: 100vh;
/* border: 1px solid green; */
margin: 0 auto;
width: 100%;
}

.col-1{
width: 8.33%;
}
.col-2{
width: 16.66%;
}
.col-3{
width: 25%;
}
.col-4{
width: 33.33%;
}
.col-5{
width: 41.66%;
}
.col-6{
width: 50%;
}
.col-7{
width: 58.33%;
}
.col-8{
width: 66.66%;
}
.col-9{
width: 75%;
}
.col-10{
width: 83.33%;
}
.col-11{
width: 91.66%;
}
.col-12{
width: 100%;
}


/* ===== Layout Styling ===== */

#header{
margin: 10px;
height: 90px;
border-radius: 5px 5px 0 0;
background-color: rgba(160,194,227,0.8);
text-align: center;
color: white;
font-size: medium;
}

#nav{
margin: 10px;
margin-top: 0;
height: 40px;
border-radius: 0;
background-color: rgba(160,194,227,0.3);
text-align: center;
color: white;
font-size: medium;
}

.mainparent{
display: flex;
}

.sidebarright{
flex-basis: 16%;
order: 1;
}

.sidebarrightfirst{
margin: 10px;
margin-top: 0;
border-radius: 0;
background-color: rgba(160,194,227,0.5);
text-align: center;
color: white;
font-size: medium;
height: 195px;
}

.sidebarrightsecond{
margin: 10px;
margin-top: 0;
border-radius: 0;
background-color: rgba(160,194,227,0.5);
text-align: center;
color: white;
font-size: medium;
height: 195px;
}

.sidebarleft{
margin: 10px;
margin-top: 0;
border-radius: 0;
background-color: rgba(160,194,227,0.5);
text-align: center;
color: white;
font-size: medium;
flex-basis: 16%;
order: -1;
height: 400px;
}

.main{
margin-bottom: 10px;
margin-top: 0;
margin-right: 0;
margin-left: 0;
border-radius: 0;
background-color: rgba(160,194,227,0.5);
text-align: center;
color: white;
font-size: medium;
flex-basis: 68%;
height: 400px;
}

.imgport{
display: flex;
flex-wrap: wrap;
}

.imgport img {
width: calc(25% - 20px);
height: 200px;
margin: 10px;
margin-top: 0;
opacity: 0.8;
transition: 0.5s ease-in-out;
}

.imgport img:hover {
opacity: 1.0;
}

#footer{
margin: 10px;
margin-top: 0;
height: 200px;
border-radius: 0 0 5px 5px;
background-color: rgba(160,194,227,0.8);
text-align: center;
color: white;
font-size: medium;
}
<header id="header">
header
</header>

<nav id="nav">
nav
</nav>

<div class="mainparent">

        
    <div class="sidebarright">
      <aside class="sidebarrightfirst">
sidebarright
</aside>
      <aside class="sidebarrightsecond">
sidebarright
</aside>
    </div>
    
<aside class="sidebarleft">
sidebarleft
</aside>

<section class="main">
main
</section>
    
</div>

<div class="imgport">
    
<img src="https://images.unsplash.com/photo-1536276502222-b10f42bcf71e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6266a66ab254251150d738aad585fd36" alt="boxes">
    
<img src="https://images.unsplash.com/photo-1538592716926-9a321f0614ea?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=488b23073a233d23083f36b67c3bd769" alt="boxes">
    
<img src="https://images.unsplash.com/photo-1506798161991-ff979d14a391?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7378c40e370c1207c6bca0d269c81818" alt="boxes">
    
<img src="https://images.unsplash.com/photo-1537203626302-cb08b9deb186?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=224379104368ef8280a06dfedda5c01b" alt="boxes">
    
<img src="https://images.unsplash.com/photo-1534256007535-8692ac6876cf?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=4c0f4f5d14175406c0ab97a8a0700950" alt="boxes">
    
<img src="https://images.unsplash.com/photo-1521405785232-7a56b029191e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c15f44bf62d0a5307c50150953fea8deg" alt="boxes">
    
<img src="https://images.unsplash.com/photo-1521405785232-7a56b029191e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c15f44bf62d0a5307c50150953fea8de" alt="boxes">
    
<img src="https://images.unsplash.com/photo-1534256007535-8692ac6876cf?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=4c0f4f5d14175406c0ab97a8a0700950" alt="boxes">
</div>

<footer id="footer">
footer
</footer>

Answer №2

Check out the updated code on CodePen. The concept involves enclosing a column flexbox layout within the right sidebar.

/* ===== Custom Framework ===== */

html{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}

*, *::before, *::after{
box-sizing: inherit;
}

body{
background-color: #fdfafb;
height: 100vh;
margin: 0 auto;
width: 100%;
}

.col-1{
width: 8.33%;
}
.col-2{
width: 16.66%;
}
.col-3{
width: 25%;
}
.col-4{
width: 33.33%;
} (and so on...)

/* ===== Layout Styling ===== */

#header{
/* Styling for header */
}

#nav{
/* Styling for nav bar */
}

.mainparent{
display: flex;
}

.sidebarright{
border-radius: 0;
text-align: center;    
}

.column .top,
.column .bottom {
/* Additional CSS properties */   
}


.sidebarleft{
/* Sidebar styling */
}

.main{
/* Main section styling */
}

.imgport{
/* Image portfolio display settings */
}

/* ==== HTML Format ==== */


<!DOCTYPE html>
<html>
    <head>
        <title>Layout</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" initial-scale="1.0">
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>

        <header id="header">
            /* Header content */
        </header>

        <nav id="nav">
           /* Navigation content */
        </nav>

        <div class="mainparent">
            <aside class="sidebarright">
                    /* Right sidebar content */
            </aside>

            <aside class="sidebarleft">
                /* Left sidebar content */
            </aside>

            <section class="main">
                /* Main content */
            </section>
        </div>

        <div class="imgport">
            /* Images portfolio display */
        </div>

        <footer id="footer">
            /* Footer content */
        </footer>

    </body>
</html>

Answer №3

If you're on the hunt for a solution to this query, look no further than my approach.

/* custom styles */
a {
    text-decoration: none;
}

h1 {
    font-size: 20px;
}

.body {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.wrapper {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    border-radius: 0 0 10px 10px;
}

/* Header styling */
/*header {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    padding: 10px 10px;*/
/*}*/
.page-info {
    display: flex;
    justify-content: center;
    border: 3px solid black;

}
.page-menu {
    display: flex;
    justify-content: center;
    border: 3px solid black;
}
nav li {
    display: inline-block;
    list-style: none;
}

nav a {
    display: block;
    padding: 20px;
    color: royalblue;
    text-decoration: none;
}
/* main section */

.main-content{
    display: flex;
    flex-direction: row;
}
.main-content .vmist{
    /**  Setting width to 60% **/
    flex: 6;
    order: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    border: 3px solid black;
}

/*.main-content .left-side{*/
/*    flex: 4;*/
/*    order: 1;*/
/*    border: 3px solid black;*/
/*}*/

.sidebarright{
    display: grid;
    flex: 4;
    order: 1;
}
.dodatok {
    background-color: orange;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid black;
}
.footer {
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="wrapper">
    <header>
        <div class="page-info">
            <h1>Test</h1>
        </div>
        <div class="page-menu">
            <nav>
                <ul id="menu-active">
                    <li class="menu-item"><a href="#info">1</a></li>
                    <li class="menu-item"><a href="#news">2</a></li>
                    <li class="menu-item"><a href="#place">3</a></li>
                    <li class="menu-item"><a href="#worker">4</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="main-content">
        <div class="vmist">
            <p>Test</p>
        </div>
        <div class="sidebarright">
        <div class="dodatok">
            <aside class="sidebarrightfirst">
                right1
            </aside>
        </div>
        <div class="footer">
            <aside class="sidebarrightfirst">
                right2
            </aside>
        </div>
        </div>
    </div>
</div>
</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

sole-child class-based selector

I am trying to target a single div with a specific class using the only-child pseudo-selector. I attempted the following approach: .foo .bar:only-child { background-color: red; } <div class="foo"> <div>1</div> <div class="bar" ...

htmlcsscss-selectors

Analyzing the structure according to the month/week/year

My array consists of count and date values: day = [ { count: 1, date: '2022-07-07' }, { count: 1, date: '2022-08-14' }, { count: 2, date: '2022-07-19' }, { count: 4, date: '2022-07-19' }, { count: 2, date: ...

javascripthtmldatedatetime

Tips on fetching the ID of the selected option using JavaScript without relying on jQuery

Looking to print the selected option ID using pure Javascript (not JQuery) for multiple select tags. If we have more than one select tag, how do we achieve this? <select onchange="showOptions(this)" id="my_select1"> <option value="a1" id="ida ...

javascripthtmlselect

tips for creating unique CSS styles for both desktop and mobile devices

As I work on creating a web page, I am encountering an issue with defining CSS for both mobile and tablet devices. Despite my efforts to define separate CSS styles for each device, only one seems to be working correctly. How can I effectively specify dif ...

htmlcssresponsive-design

Several iFrames embedded on the website automatically adjust to the same pre-set height

Apologies if this question has already been addressed, but I am struggling to properly articulate it. Here's the issue: I have a client's holiday accommodation website that uses three embedded iFrames for a Calendar, Booking Enquiry, and floorpla ...

javascriptjqueryhtmlcssiframe

How can we ensure that the entire BS4 Navbar (on smaller screens) is clickable, allowing users to show/hide the submenu by touching anywhere within the area?

https://i.sstatic.net/03po7.png My goal is to make the entire navbar area touchable, rather than just having a button. I believe this can be achieved by adjusting the default Bootstrap 4 navbar settings: HTML: <nav id="menu-navbar" class="navbar navb ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Unique style sheet for unique content block

Recently I made some custom modifications to a block by adding style attributes directly into the .phtml file between tags. Now, I am looking to create a separate file for my block so that it can use a custom .css file. Where should I place this new file? ...

cssfrontendblock

Excel's VBa cannot locate the table within the innerHTML of IE

My current dilemma involves attempting to extract a table from a webpage. The issue is that copying the entire page is not feasible due to buttons and dynamic elements causing a memory overload when pasted into Excel. To work around this, I am trying to ex ...

htmlexcelvbainternet-explorer

Background Image Division (Twitter Bootstrap)

I am facing a challenge while creating a module with a span8 width and varying height. The div contains an image that dictates its height, with text overlaid on the image. My issue lies in preventing part of the image from getting cropped when Bootstrap re ...

htmlcsstwitter-bootstrapresponsive-design

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

When I click on "Products" in my main navigation, only the first 6 items are displayed from a nested ul. How can I make all of them display when the user clicks on "Products"? Is this a CSS issue or a problem with the script? Here's a screenshot for r ...

javascriptjqueryhtmlcssnavigationbar

Display the exclamation point symbol after the hash symbol in the URL while navigating in AngularJS

I recently started learning AngularJS and decided to test out routing with a demo. Here are the relevant parts of my code: app.js var app=angular.module("tutorialApp",["ngRoute","tutorialCtrlModule"]); app.config(function($routeProvider){ $routeProvi ...

htmlangularjs

Experience the absence of occurrences when utilizing ng-include

As a newcomer to HTML/CSS/JS, I am facing an issue with creating a list of a specific component. While my componentA works perfectly, I encounter problems when trying to include multiple instances of it in componentB using ng-include as it seems to lose th ...

javascripthtmlangularjs

One cannot loop the .click function in order to create multiple buttons

I am currently in the process of creating multiple buttons, each with its own unique function. While everything is functioning perfectly when outside of the loop, I am encountering an issue once the click function is inserted within the each loop. $.each( ...

jqueryhtmlajaxeach

Can the design be implemented using the Bootstrap grid system?

Utilizing bootstrap 5, yet a bootstrap 4 demonstration may suffice. Clearly, I can accomplish this design without employing bootstrap, however, that is not my current objective. I am curious if there is a feature within the bootstrap framework that I may ...

csstwitter-bootstrapbootstrap-4bootstrap-5

The fopen() function requires a valid path as its first parameter

Encountered a new error that I have never seen before! Feeling very confused... I'm currently only testing this specific section of code to achieve what I want: <?php if(isset($_GET['id'])) { $index = $_GET['id']; $nick ...

phphtml

Angular renderer's setStyle method does not support the application of linear-gradient

Why won't Angular's renderer2 apply linear-gradient CSS in this code snippet? Can anyone provide insights? export class AppComponent implements OnInit { constructor(private renderer: Renderer2, private elementRef: ElementRef) {} public ngOn ...

cssangularangular-renderer2

Tips for properly importing Polymer when using Parse for hosting

Having difficulties with displaying polymer elements on my parse app. The file structure is as follows: /cloud /views app.js main.js /config global.json /public /components /css index.html In index.html, the imports are se ...

htmlnode.jsexpressparse-platformpolymer

transform the stationary drawing to the top and left position at coordinate (0,0)

Exploring canvas has led me to encounter a puzzling issue with the translate method. While working on this fiddle http://jsfiddle.net/claireC/ZJdus/4/, my goal was to have the drawing move and bounce off all four walls. However, I noticed that it would no ...

javascripthtmlcanvashtml5-canvas

Tips for creating a responsive table that adjusts to the width of the column in Bootstrap/CSS

I need help adjusting my Bootstrap table to fit the width of a col-md-5 column without overflowing into the adjacent invoice template table. I attempted to use the .table-responsive class, but it didn't solve the issue. My current version is Bootstrap ...

cssbootstrap-4

Need assistance with updating inner HTML content using a PHP function after an AJAX call?

I currently have a code snippet that is responsible for generating content on my website: <div class="content" id="links"> <?php displayTitle("Links"); ?> <?php displayContent("Links", $isLoggedIn); ?> </div> Within this c ...

phpjavascripthtmlajax