How to make scrollable main content be alongside the fixed side bar, not after it? - html

Question

I'm making a news webiste for my school project. I have a logo banner that hide when scrolling, after that there is nav-bar and sidebar which sticks to top after scrolling. But the main content is showing after the sidebar and not alongside it. Sidebar is fixed but the content is scrollable
HTML
`
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<div id="topnav" class="topnav">
<a href="index.html" class="active" >Home</a></li> <!-- selected nav bar -->
Contact Us</li>
Stats</li>
Login</li>
</div>
<div class="sidebar">
<table class="match" >
</table>
<table class="match" >
<tr>
<td class="teamA"><img src="images/flags/saudiarabia.png" class="crest"></td>
<td class="scoreA">210/7 <br>(20)</td>
</tr>
<tr>
<td class="teamB"><img src="images/flags/portugal.png" class="crest" ></td>
<td class="scoreB">205/10 <br>(18)</td>
</tr>
</table>
</div>
<div class="main">
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</div>
`
css
.logo {
height: 200px;
display: flex;
justify-content: center;
}
\#topnav {
background-color:#0c5d9c;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 9999;
text-align: center;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 14px 14px 14px;
text-decoration: none;
font-size: 17px;
display: inline-block;
}
.sidebar {
width: 250px;
height: 100%;
position: -webkit-sticky;
position: sticky;
top: 60px;
background-color: red;
}
.main{
margin-left: 250px;
padding-left: 10px;
box-shadow: #313131;
padding-right: 10px;
}
I tried many things like using a wrapper over sidebar and main content. but it didn't work.
full html https://pastebin.com/5rdiYdMa
full css https://pastebin.com/CHQDPVGY

Answer 1

Please check below working snippet
body{
background-color: #ddd;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
/*------LOGO------------------- */
.logo {
height: 200px;
display: flex;
justify-content: center;
}
/* -----------------NAV BAR-------------------------------*/
/* Add a black background color to the top navigation */
#topnav {
background-color:#0c5d9c;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 9999;
text-align: center;
}
/* Style the links inside the navigation bar */
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 14px 14px 14px;
text-decoration: none;
font-size: 17px;
display: inline-block;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #e31e24;
color: white;
}
/*-----------------NAV BAR END-----------------------------*/
.content {
display: flex;
flex-wrap: nowrap;
}
/*-----------------SIDE BAR-----------------------------*/
.sidebar {
width: 250px;
height: 100%;
/* position: absolute; chnage this tro scroll*/
position: -webkit-sticky;
position: sticky;
top: 60px;
}
.match {
margin-top: 10px;
width: 100%;
font-weight: bold;
color: white;
border-collapse: collapse;
border-spacing: 0;
}
.crest {
width: 40px;
height: auto;
padding: 10px;
/* center the image*/
display: block;
margin-left: auto;
margin-right: auto;
}
.teamA {
background-color: #e31e24;
/* border-radius: 20px 0px 0px 0px; */
}
.scoreA {
font-size: 20px;
font-weight: bolder;
background-color: #e31e24;
text-align: center;
vertical-align: middle;
/* border-radius: 0px 20px 0px 0px; */
}
.teamB {
background-color: #0c5d9c;
/* border-radius: 0px 0px 0px 20px; */
}
.scoreB {
font-size: 20px;
font-weight: bolder;
background-color: #0c5d9c;
text-align: center;
vertical-align: middle;
/* border-radius: 0px 0px 20px 0px; */
}
.sidebarnews {
width: 100%;
background-color: #0c5d9c;
height: auto;
padding: 0px;
color: white;
margin-top: 10px;
border-collapse: collapse;
border-spacing: 0;
/* border-radius: 20px 20px 20px 20px; */
}
.sidebarnews thead{
font-size: 20px;
}
.sidebarnews td{
height: 50px;
padding: 10px;
}
.sidebarnews tr:nth-child(even) td{
background-color: #0c5d9c;
}
.sidebarnews tr:nth-child(odd) td{
background-color:#e31e24;
}
/* ------------------------end sidebar-----------------------------*/
.main{
margin-left: 0px;
padding-left: 10px;
box-shadow: #313131;
padding-right: 10px;
width: calc(100% - 250px);
}
article{
height: auto;
background-color: white;
padding: 10px;
margin-top: 10px;
/* border-radius: 20px 20px 20px 20px; */
box-shadow: 0px 0px 102px 0px rgba(0,0,0,0.5);
}
article h2{
font-size: 30px;
font-weight: bold;
}
article p{
font-size: 20px;
color: #313131;
}
article img{
width: 100%;
height: auto;
}
/* -----------------when screen width is small------------------- */
#media (max-width: 768px) {
.sidebar {
width: 96%;
height: auto;
position: relative;
padding-left : 10px;
}
.sidebarnews {
display: none;
}
.main {
margin: 0px;
padding: 0px;
}
.logo {
height: 100px;
}
.topnav {
display:none;
}
article h2{
font-size: 25px;
font-weight: bold;
}
article p{
font-size: 15px;
color: #313131;
}
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
</head>
<body class="body">
<!-- create a logo area in header -->
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<!-- create a logo area in header -->
<div id="topnav" class="topnav">
<a href="index.html" class="active" >Home</a></li> <!-- selected nav bar -->
Contact Us</li>
Stats</li>
Login</li>
<!-- searchbutton-->
</div>
<div class="content">
<!-- sidebar -->
<div class="sidebar">
<table class="match" >
<tr>
<td class="teamA"><img src="images/flags/spain.png" class="crest"></td>
<td class="scoreA">210/7 <br>(20)</td>
</tr>
<tr>
<td class="teamB"><img src="images/flags/england.png" class="crest" ></td>
<td class="scoreB">205/10 <br>(18)</td>
</tr>
</table>
<table class="match" >
<tr>
<td class="teamA"><img src="images/flags/saudiarabia.png" class="crest"></td>
<td class="scoreA">210/7 <br>(20)</td>
</tr>
<tr>
<td class="teamB"><img src="images/flags/portugal.png" class="crest" ></td>
<td class="scoreB">205/10 <br>(18)</td>
</tr>
</table>
<table class="sidebarnews">
<thead>
<tr>
<th>LATEST NEWS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit</td>
</tr>
</tbody>
</table>
</div>
<!-- main content -->
<div class="main">
<article>
<h2 >India's contenders for the 2023 ODI World Cup </h2>
<img src="images/news/team-india.jpg"></img>
<p>With many candidates for the final fifteen, the challenge for the hosts is to get their combinations right between now and the tournament</p>
</article>
<article>
<h2>Kuldeep Sen, Shahbaz to replace Dayal and Jadeja for Bangladesh ODIs </h2>
<img src="images/news/kuldeep.webp"></img>
<p>Pacer Kuldeep Sen and all-rounder Shahbaz Ahmed have been named as replacements for Yash Dayal and Ravindra Jadeja for the three-match ODI series against Bangladesh, the BCCI stated in a release on Wednesday (November 23). </p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<img src="images/news/kuldeep.webp"></img>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</div>
</div>
</body>
</html>
Here, I have Wrapped sidebar and main div into parent div.
Removed margin-left: 250px from main div and added this css:
.content {
display: flex;
flex-wrap: nowrap;
}