'HTML/CSS -- Making a column with a Left and Right Side for content
I am working on a project to create a webpage. I have been trying to get these two boxes side by side each other. But I am only getting them stacking on top of each other and in the center or left side of the page.
Below is a reproducible example you will be able to see the current code. All I need is the two boxes to be side by side each other with the left and right class that I already have put in. As, i want to use this technique to add more chapters below the first two. Like this;
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 250px;
height: 70px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.cpp-chapter{
margin: auto;
width: 80%;
padding: 60px 0;
display: fixed;
}
.cpp-chapter-col{
width: 80%;
margin: auto;
border-radius: 8px;
padding: 0 11px 9px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
max-width: 800px;
margin-bottom: 12px;
}
.cpp-chapter h1{
color: #111;
text-transform: uppercase;
font-weight: 600;
text-align: center;
}
.blog-content{
width: 80%;
margin: auto;
padding: 60px 0;
}
.chapter-header{
padding-bottom: 4px;
}
.chapter-header-num{
color: #fff;
font-size: 1.2rem;
float: right;
background-color: #f44336;
padding: 0 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.chapter-header-title{
color: #3B4C5A;
font-size: 1.4rem;
font-weight: 400;
padding-top: 4px;
}
.cpp-chapter-list{
margin-top: 4px;
}
.lesson-row{
margin: 3px 0;
border-radius: 6px;
display: flex;
align-items: center;
transition: .1s all;
}
.lesson-row-num{
background: #f44336;
color: #fff;
font-size: 1.1rem;
font-weight: 400;
border-radius: 4px;
padding: 0;
margin: 3px 10px 3px 4px;
width: 46px;
min-width: 46px;
text-align: center;
line-height: 20px;
}
.chapter-left{
flex-basis: 50%;
}
.chapter-right{
flex-basis: 50%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Final Project</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../public/css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<section class="tut-header">
<nav>
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="course.html">COURSE</a></li>
<li><a href="getStarted.html">GET STARTED</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
<!-- Chapter Section -->
<section class="cpp-chapter">
<div class="cpp-chapter-col"> <!--Chapter Column Start -->
<div class="chapter-left"> <!--Chapter Left Start -->
<div class="chapter-header"> <!--Chapter Header Start -->
<a name="Chapter1"></a>
<div class="chapter-header-num">Chapter 1</div>
<div class="chapter-header-title">C++ Basics</div>
</div> <!--Chapter Header End -->
<div class="cpp-chapter-list"> <!--Chapter List Start -->
<div class="lesson-row">
<div class="lesson-row-num">1.1</div>
<div class="lesson-row-title">Statements and the Structure of a Program</div>
</div>
<div class="lesson-row">
<div class="lesson-row-num">1.2</div>
<div class="lesson-row-title">Comments</div>
</div>
</div> <!--Chapter List End -->
</div> <!--Chapter Left End -->
</div> <!--Chapter Column End -->
<div class="cpp-chapter-col"> <!--Chapter Column Start -->
<div class="chapter-right"> <!--Chapter Right Start -->
<div class="chapter-header"> <!--Chapter Header Start -->
<a name="Chapter1"></a>
<div class="chapter-header-num">Chapter 2</div>
<div class="chapter-header-title">C++ Basics: Functions and Files</div>
</div> <!--Chapter Header End -->
<div class="cpp-chapter-list"> <!--Chapter List Start-->
<div class="lesson-row">
<div class="lesson-row-num">2.1</div>
<div class="lesson-row-title">Introduction to Functions</div>
</div>
<div class="lesson-row">
<div class="lesson-row-num">2.2</div>
<div class="lesson-row-title">Return Values</div>
</div>
</div><!--Chapter List End -->
</div><!--Chapter Right End -->
</div><!--Chapter Column End -->
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>Solution 1:[1]
I added
.cpp-chapter-col{
width: 50%;
float: left;
To get the elements to show next to each other
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 250px;
height: 70px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.cpp-chapter{
margin: auto;
width: 80%;
padding: 60px 0;
display: fixed;
}
.cpp-chapter-col{
width: 50%;
float: left;
margin: auto;
border-radius: 8px;
padding: 0 11px 9px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
max-width: 800px;
margin-bottom: 12px;
}
.cpp-chapter h1{
color: #111;
text-transform: uppercase;
font-weight: 600;
text-align: center;
}
.blog-content{
width: 80%;
margin: auto;
padding: 60px 0;
}
.chapter-header{
padding-bottom: 4px;
}
.chapter-header-num{
color: #fff;
font-size: 1.2rem;
float: right;
background-color: #f44336;
padding: 0 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.chapter-header-title{
color: #3B4C5A;
font-size: 1.4rem;
font-weight: 400;
padding-top: 4px;
}
.cpp-chapter-list{
margin-top: 4px;
}
.lesson-row{
margin: 3px 0;
border-radius: 6px;
display: flex;
align-items: center;
transition: .1s all;
}
.lesson-row-num{
background: #f44336;
color: #fff;
font-size: 1.1rem;
font-weight: 400;
border-radius: 4px;
padding: 0;
margin: 3px 10px 3px 4px;
width: 46px;
min-width: 46px;
text-align: center;
line-height: 20px;
}
.chapter-left{
flex-basis: 50%;
}
.chapter-right{
flex-basis: 50%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Final Project</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../public/css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<section class="tut-header">
<nav>
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="course.html">COURSE</a></li>
<li><a href="getStarted.html">GET STARTED</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
<!-- Chapter Section -->
<section class="cpp-chapter">
<div class="cpp-chapter-col"> <!--Chapter Column Start -->
<div class="chapter-left"> <!--Chapter Left Start -->
<div class="chapter-header"> <!--Chapter Header Start -->
<a name="Chapter1"></a>
<div class="chapter-header-num">Chapter 1</div>
<div class="chapter-header-title">C++ Basics</div>
</div> <!--Chapter Header End -->
<div class="cpp-chapter-list"> <!--Chapter List Start -->
<div class="lesson-row">
<div class="lesson-row-num">1.1</div>
<div class="lesson-row-title">Statements and the Structure of a Program</div>
</div>
<div class="lesson-row">
<div class="lesson-row-num">1.2</div>
<div class="lesson-row-title">Comments</div>
</div>
</div> <!--Chapter List End -->
</div> <!--Chapter Left End -->
</div> <!--Chapter Column End -->
<div class="cpp-chapter-col"> <!--Chapter Column Start -->
<div class="chapter-right"> <!--Chapter Right Start -->
<div class="chapter-header"> <!--Chapter Header Start -->
<a name="Chapter1"></a>
<div class="chapter-header-num">Chapter 2</div>
<div class="chapter-header-title">C++ Basics: Functions and Files</div>
</div> <!--Chapter Header End -->
<div class="cpp-chapter-list"> <!--Chapter List Start-->
<div class="lesson-row">
<div class="lesson-row-num">2.1</div>
<div class="lesson-row-title">Introduction to Functions</div>
</div>
<div class="lesson-row">
<div class="lesson-row-num">2.2</div>
<div class="lesson-row-title">Return Values</div>
</div>
</div><!--Chapter List End -->
</div><!--Chapter Right End -->
</div><!--Chapter Column End -->
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>Solution 2:[2]
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 250px;
height: 70px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.cpp-chapter{
margin: auto;
width: 80%;
padding: 60px 0;
display: fixed;
}
.cpp-chapter-col{
width: 50%;
float:left;
margin: auto;
border-radius: 8px;
padding: 0 11px 9px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
max-width: 800px;
margin-bottom: 12px;
}
.cpp-chapter h1{
color: #111;
text-transform: uppercase;
font-weight: 600;
text-align: center;
}
.blog-content{
width: 80%;
margin: auto;
padding: 60px 0;
}
.chapter-header{
padding-bottom: 4px;
}
.chapter-header-num{
color: #fff;
font-size: 1.2rem;
float: right;
background-color: #f44336;
padding: 0 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.chapter-header-title{
color: #3B4C5A;
font-size: 1.4rem;
font-weight: 400;
padding-top: 4px;
}
.cpp-chapter-list{
margin-top: 4px;
}
.lesson-row{
margin: 3px 0;
border-radius: 6px;
display: flex;
align-items: center;
transition: .1s all;
}
.lesson-row-num{
background: #f44336;
color: #fff;
font-size: 1.1rem;
font-weight: 400;
border-radius: 4px;
padding: 0;
margin: 3px 10px 3px 4px;
width: 46px;
min-width: 46px;
text-align: center;
line-height: 20px;
}
.chapter-left{
flex-basis: 50%;
}
.chapter-right{
flex-basis: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Final Project</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../public/css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<section class="tut-header">
<nav>
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="course.html">COURSE</a></li>
<li><a href="getStarted.html">GET STARTED</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
<!-- Chapter Section -->
<section class="cpp-chapter">
<div class="cpp-chapter-col"> <!--Chapter Column Start -->
<div class="chapter-left"> <!--Chapter Left Start -->
<div class="chapter-header"> <!--Chapter Header Start -->
<a name="Chapter1"></a>
<div class="chapter-header-num">Chapter 1</div>
<div class="chapter-header-title">C++ Basics</div>
</div> <!--Chapter Header End -->
<div class="cpp-chapter-list"> <!--Chapter List Start -->
<div class="lesson-row">
<div class="lesson-row-num">1.1</div>
<div class="lesson-row-title">Statements and the Structure of a Program</div>
</div>
<div class="lesson-row">
<div class="lesson-row-num">1.2</div>
<div class="lesson-row-title">Comments</div>
</div>
</div> <!--Chapter List End -->
</div> <!--Chapter Left End -->
</div> <!--Chapter Column End -->
<div class="cpp-chapter-col"> <!--Chapter Column Start -->
<div class="chapter-right"> <!--Chapter Right Start -->
<div class="chapter-header"> <!--Chapter Header Start -->
<a name="Chapter1"></a>
<div class="chapter-header-num">Chapter 2</div>
<div class="chapter-header-title">C++ Basics: Functions and Files</div>
</div> <!--Chapter Header End -->
<div class="cpp-chapter-list"> <!--Chapter List Start-->
<div class="lesson-row">
<div class="lesson-row-num">2.1</div>
<div class="lesson-row-title">Introduction to Functions</div>
</div>
<div class="lesson-row">
<div class="lesson-row-num">2.2</div>
<div class="lesson-row-title">Return Values</div>
</div>
</div><!--Chapter List End -->
</div><!--Chapter Right End -->
</div><!--Chapter Column End -->
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | BCT |
| Solution 2 |