What is the best way to include two additional columns next to the sidebar?

Question

What is the best way to include two additional columns next to the sidebar?

I'm having trouble adding another two-column section next to the sidebar.

Is there anyone who can help me out?

<!-- -------------Navigation Bar------------- -->

<div class="sidebar">
  <a class="active" href="#home">Home</a>
  <a href="#services">Example 1</a>
  <a href="#portfolio">Example 2</a>
  <a href="#about">Example 3</a>
  <a href="#contact">Example 4</a>
</div>
<div class="col">
  <div class="content">
    <h2>Responsive Sidebar Example</h2>
    <p>This example uses media queries to switch the sidebar to a top navigation bar when the screen size is 700px or less.
    </p>
    <p>We have also included a media query for screens that are 400px or less, which will stack and center the navigation links vertically.</p>
    <h3>Try resizing the browser window to see the effect.</h3>
  </div>

</div>

html css

Answer 1

Answer №1

Take a look at this for adjusting the width as needed

Set up 2 div elements and customize them to your liking, here is just a sample:

.section1{
    background-color:#00ffff;
    width:70%;
    float:left;
    height:100vh;
    border-right: 1vw solid #F5E5D6; 
    box-sizing: border-box;
    margin:0;
    padding:0;  
}
.section2{
    background-color:#f1c40f;
    width:30%;
    float:left;
    height:100vh;
    margin:0;
    padding:0;
  box-sizing: border-box;
}

<div class="sidebar">
  <a class="active" href="#home">Home</a>
  <a href="#services">Example 1</a>
  <a href="#portfolio">Example 2</a>
  <a href="#about">Example 3</a>
  <a href="#contact">Example 4</a>
</div>
<div class="col">
  <div class="content">
  <div class="section1">
    <h2>Editable Sidebar Example</h2>
    <p>This example applies media queries to change the sidebar into a top navigation bar when the screen size is 700px or smaller.
    </p>
    <p>Additionally, there's a media query for screens that are 400px or less, which will stack the navigation links vertically and center them.</p>

    </div>
    <div class="section2">
    Second display
</div>
  </div>

</div>

Answer 2

Take a look at this for adjusting the width as needed

Set up 2 div elements and customize them to your liking, here is just a sample:

.section1{
    background-color:#00ffff;
    width:70%;
    float:left;
    height:100vh;
    border-right: 1vw solid #F5E5D6; 
    box-sizing: border-box;
    margin:0;
    padding:0;  
}
.section2{
    background-color:#f1c40f;
    width:30%;
    float:left;
    height:100vh;
    margin:0;
    padding:0;
  box-sizing: border-box;
}

<div class="sidebar">
  <a class="active" href="#home">Home</a>
  <a href="#services">Example 1</a>
  <a href="#portfolio">Example 2</a>
  <a href="#about">Example 3</a>
  <a href="#contact">Example 4</a>
</div>
<div class="col">
  <div class="content">
  <div class="section1">
    <h2>Editable Sidebar Example</h2>
    <p>This example applies media queries to change the sidebar into a top navigation bar when the screen size is 700px or smaller.
    </p>
    <p>Additionally, there's a media query for screens that are 400px or less, which will stack the navigation links vertically and center them.</p>

    </div>
    <div class="section2">
    Second display
</div>
  </div>

</div>

Answer 3

Answer №2

To accomplish this, encase your content in a container that mimics a row structure with its children aligned as columns. This can be achieved using either display: flex or display: grid, based on your preference.

.row {
  display: flex;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 20%
}

.content {
  width: 60%
}

<div class="row">
  <div class="sidebar">
    <a class="active" href="#home">Home</a>
    <a href="#services">Example 1</a>
    <a href="#portfolio">Example 2</a>
    <a href="#about">Example 3</a>
    <a href="#contact">Example 4</a>
  </div>
  <div class="content">
    <h2>Responsive Sidebar Example</h2>
    <p>
      This example uses media queries to switch the sidebar to a top navigation bar when the screen size is 700px or less.
    </p>
    <p>
      Additionally, there's a media query for screens 400px or less, which vertically stacks and centers the navigation links.
    </p>
    <h3>Resize the browser window to observe the effect.</h3>
  </div>
  <div class="sidebar-2">
    Another container
  </div>
</div>

Answer 4

To accomplish this, encase your content in a container that mimics a row structure with its children aligned as columns. This can be achieved using either display: flex or display: grid, based on your preference.

.row {
  display: flex;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 20%
}

.content {
  width: 60%
}

<div class="row">
  <div class="sidebar">
    <a class="active" href="#home">Home</a>
    <a href="#services">Example 1</a>
    <a href="#portfolio">Example 2</a>
    <a href="#about">Example 3</a>
    <a href="#contact">Example 4</a>
  </div>
  <div class="content">
    <h2>Responsive Sidebar Example</h2>
    <p>
      This example uses media queries to switch the sidebar to a top navigation bar when the screen size is 700px or less.
    </p>
    <p>
      Additionally, there's a media query for screens 400px or less, which vertically stacks and centers the navigation links.
    </p>
    <h3>Resize the browser window to observe the effect.</h3>
  </div>
  <div class="sidebar-2">
    Another container
  </div>
</div>

Answer 5

Answer №3

Something similar to this

.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <title>My Document</title>
    </head>
    <body>
        <div class="wrapper">
            <div class="left-sidebar">
                <a class="active" href="#home">Home</a>
                <a href="#services">Service 1</a>
                <a href="#projects">Project 1</a>
                <a href="#about">About Us</a>
                <a href="#contact">Contact Us</a>
            </div>
            <div class="main-content">
                <h2>Responsive Sidebar Demo</h2>
                <p>This demo utilizes CSS Grid for a responsive layout where the sidebar transforms into a top navigation menu when the screen size is small.</p>
                <p>There are also media queries for screens smaller than 400px, which will stack the navigation items vertically in the center of the page.</p>
            </div>
        </div>
    </body>
</html>

Answer 6

Something similar to this

.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <title>My Document</title>
    </head>
    <body>
        <div class="wrapper">
            <div class="left-sidebar">
                <a class="active" href="#home">Home</a>
                <a href="#services">Service 1</a>
                <a href="#projects">Project 1</a>
                <a href="#about">About Us</a>
                <a href="#contact">Contact Us</a>
            </div>
            <div class="main-content">
                <h2>Responsive Sidebar Demo</h2>
                <p>This demo utilizes CSS Grid for a responsive layout where the sidebar transforms into a top navigation menu when the screen size is small.</p>
                <p>There are also media queries for screens smaller than 400px, which will stack the navigation items vertically in the center of the page.</p>
            </div>
        </div>
    </body>
</html>

Answer 7

Answer №4

I have introduced a new DIV element, so please review it and gather some insights. I have made edits relevant to your code.

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.container{
    max-width: 1400px;
    margin: auto;
}
.header{                /* Header */
    padding: 10px 20px;
    background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),url(/assets/top.jpg);
    background-size: cover;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    
}
   
.fa{                     /* icon color */
    color: white;
}
.comLink:hover{          /* icon hover */
    color: #ccc;
}

input{                  /* Search input*/
    margin-top: 8px;
    padding:6px ;
    border: 1px solid #ccc;
    width: 70%;
    border-radius: 4px;
}
.btn{                   /* Search Button */
    padding: 7.5px;
    background:#f44336 ;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
.btn:hover{                /* Button hover */
    background: #FF7F50;
}
.links a{
    padding-left: 19px;
}

.logo{                      /* Logo */
    font-family: 'Roboto', sans-serif;
   padding: 40px 0px;
   font-size: 30px;
   text-decoration: none;
   color: white;
   letter-spacing: 8px;
}
span{
    color: #f44336;
}

a{
    text-decoration: none;
}

.myDIV{         /* here is my changes */
  display:flex;
}

li{
    list-style: none;
}
   
.sidebar {
  display:flex; /* here is the changes */
  flex-direction:column; /* here is the changes */
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  height: 100%;
  overflow: auto;
  position: relative;
}

.sidebar a {
    font-family: 'Lato', sans-serif;
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}
 
.sidebar a.active {
  background-color: #f44336;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

/* Content */


@media screen and (max-width: 768px) {
  
.myDIV{      /* here is my changes */
  display:flex;
  flex-direction:column;
}

.sidebar{   /* here is my changes */
    display: flex;
    flex-direction: row;
    width: -webkit-fill-available;
}
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {
      float: left;
    }
  div.content {
      margin-left: 0;
    }

  .logo{
      font-size: 25px;
  }
}

@media screen and (max-width: 500px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
  .logo{
      font-size: 25px;
      letter-spacing: normal;
  }
}

.section1{
    background-color:#00ffff;
    width:70%;
    float:left;
    height:100vh;
    border-right: 1vw solid #F5E5D6; 
    box-sizing: border-box;
    margin:0;
    padding:0;  
}
.section2{
    background-color:#f1c40f;
    width:28%;
    float:left;
    height:100vh;
    margin:0;
    padding:0;
  box-sizing: border-box;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Hi There! Aziz</title>


    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">

        <!-- -------------Header/Banner------------- -->

        <div class="header">
            <a href="#" class="logo">ABDUL <span>AZIZ</span></a>
            <div class="links">
                <a href="#"><i class="comLink fa fa-facebook-square fa-2x"></i></a>
                <a href="#"><i class="comLink fa fa-github-square fa-2x"></i></a>
                <a href="#"><i class="comLink fa fa-linkedin-square fa-2x"></i></a>
                <a href="#"><i class="comLink fa fa-behance-square fa-2x"></i></a>
                <form action="#">
                    <input type="text" placeholder="Search...">
                    <button class="btn" type="submit"><i class="fa fa-search"></i></button>
                </form>
            </div>

        </div>


        <!-- -------------Navigation Bar------------- -->
    <div class ="myDIV">              <!-- here is the DIV I added-->
        <div class="sidebar">
            <a class="active" href="#home">Home</a>
            <a href="#services">Example 1</a>
            <a href="#portfolio">Example 2</a>
            <a href="#about">Example 3</a>
            <a href="#contact">Example 4</a>
        </div>
        
        <div class="col">
            <div class="content">
                <div class="section1">
                    <h2>Responsive Sidebar Example</h2>
                    <p>This example use media queries to transform the sidebar to a top navigation bar when the screen
                        size
                        is
                        700px or less.
                    </p>
                    <p>We have also added a media query for screens that are 400px or less, which will vertically stack
                        and
                        center the navigation links.</p>

                </div>
                
                <div class="section2">
                    2nd screen
                </div>
                
            </div>
        </div>                
     </div>
   </div>
</body>

</html>

I have indicated "here is my changes" like that to identify my modifications

Please see the updated answer

Answer 8

I have introduced a new DIV element, so please review it and gather some insights. I have made edits relevant to your code.

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.container{
    max-width: 1400px;
    margin: auto;
}
.header{                /* Header */
    padding: 10px 20px;
    background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),url(/assets/top.jpg);
    background-size: cover;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    
}
   
.fa{                     /* icon color */
    color: white;
}
.comLink:hover{          /* icon hover */
    color: #ccc;
}

input{                  /* Search input*/
    margin-top: 8px;
    padding:6px ;
    border: 1px solid #ccc;
    width: 70%;
    border-radius: 4px;
}
.btn{                   /* Search Button */
    padding: 7.5px;
    background:#f44336 ;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
.btn:hover{                /* Button hover */
    background: #FF7F50;
}
.links a{
    padding-left: 19px;
}

.logo{                      /* Logo */
    font-family: 'Roboto', sans-serif;
   padding: 40px 0px;
   font-size: 30px;
   text-decoration: none;
   color: white;
   letter-spacing: 8px;
}
span{
    color: #f44336;
}

a{
    text-decoration: none;
}

.myDIV{         /* here is my changes */
  display:flex;
}

li{
    list-style: none;
}
   
.sidebar {
  display:flex; /* here is the changes */
  flex-direction:column; /* here is the changes */
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  height: 100%;
  overflow: auto;
  position: relative;
}

.sidebar a {
    font-family: 'Lato', sans-serif;
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}
 
.sidebar a.active {
  background-color: #f44336;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

/* Content */


@media screen and (max-width: 768px) {
  
.myDIV{      /* here is my changes */
  display:flex;
  flex-direction:column;
}

.sidebar{   /* here is my changes */
    display: flex;
    flex-direction: row;
    width: -webkit-fill-available;
}
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {
      float: left;
    }
  div.content {
      margin-left: 0;
    }

  .logo{
      font-size: 25px;
  }
}

@media screen and (max-width: 500px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
  .logo{
      font-size: 25px;
      letter-spacing: normal;
  }
}

.section1{
    background-color:#00ffff;
    width:70%;
    float:left;
    height:100vh;
    border-right: 1vw solid #F5E5D6; 
    box-sizing: border-box;
    margin:0;
    padding:0;  
}
.section2{
    background-color:#f1c40f;
    width:28%;
    float:left;
    height:100vh;
    margin:0;
    padding:0;
  box-sizing: border-box;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Hi There! Aziz</title>


    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">

        <!-- -------------Header/Banner------------- -->

        <div class="header">
            <a href="#" class="logo">ABDUL <span>AZIZ</span></a>
            <div class="links">
                <a href="#"><i class="comLink fa fa-facebook-square fa-2x"></i></a>
                <a href="#"><i class="comLink fa fa-github-square fa-2x"></i></a>
                <a href="#"><i class="comLink fa fa-linkedin-square fa-2x"></i></a>
                <a href="#"><i class="comLink fa fa-behance-square fa-2x"></i></a>
                <form action="#">
                    <input type="text" placeholder="Search...">
                    <button class="btn" type="submit"><i class="fa fa-search"></i></button>
                </form>
            </div>

        </div>


        <!-- -------------Navigation Bar------------- -->
    <div class ="myDIV">              <!-- here is the DIV I added-->
        <div class="sidebar">
            <a class="active" href="#home">Home</a>
            <a href="#services">Example 1</a>
            <a href="#portfolio">Example 2</a>
            <a href="#about">Example 3</a>
            <a href="#contact">Example 4</a>
        </div>
        
        <div class="col">
            <div class="content">
                <div class="section1">
                    <h2>Responsive Sidebar Example</h2>
                    <p>This example use media queries to transform the sidebar to a top navigation bar when the screen
                        size
                        is
                        700px or less.
                    </p>
                    <p>We have also added a media query for screens that are 400px or less, which will vertically stack
                        and
                        center the navigation links.</p>

                </div>
                
                <div class="section2">
                    2nd screen
                </div>
                
            </div>
        </div>                
     </div>
   </div>
</body>

</html>

I have indicated "here is my changes" like that to identify my modifications

Please see the updated answer

What is the best way to include two additional columns next to the sidebar?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Subtract and include characters in a string

Database insertion failed due to a data error

What is the best way to use CSS to hyphenate a capitalized word?

The moving div suddenly halts before continuing its journey

Unable to display PHP response in a div using AJAX - issue persisting

Selection of text within a block resembling a bar of buttons

Extracting information from HTML and transferring it to Javascript using jQuery

Child element does not follow z-index rules

What is the best way to integrate multiple HTML static pages within an ASP.NET MVC project while utilizing the Layout page?

I am encountering issues with an HTML table that is in need of fixing, and I must find a solution without relying on

When a base html tag is dynamically added, the browser mistakenly loads assets twice

Creating an If statement to evaluate the state of a parameter

Folded Corner Div using only CSS

Tips for creating unique Styles for H1, H2, and H3 with MaterialCSS by utilizing createTheme

What is the best way to create a collage of images with a random and unique arrangement?

How many logical lines of code are in the Ubuntu operating system?

problems with an extra administrator account access

When attempting to send data using jQuery to PHP, an issue arises where PHP is unable to receive the information, resulting in an undefined variable

A common occurrence is for jQuery/Javascript Ajax POST to generate 6 identical posts when used within a .each loop, happening approximately 20

SQL query for finding the number of shared nodes between two given nodes