How to put main element next to sidebar?

saeedcs98 · March 3, 2020, 11:21am

Hey there I am trying to put main element next to the sidebar please let me know how can I do this in a professional way

Here is image of this page

footer sec1569×648 27.9 KB

header sec1585×788 50.7 KB

here’s is my html structure

<body>
	<header>
		<div class="top-section">
			<p>	<span  class="offer">offer</span> Up to ₹200 Cashback on Movie Tickets </p><p><a hre="#"> Accept Payments </a>| <a hre="#"> Food  Wallet </a>|<a hre="#"> Track Order </a>| <a hre="#">Sell on RoyalPay Mall </a>|<a hre="#"> RoyalPay Smart RetailKYC </a>|<a hre="#"> 24x7 Helps</a>
			</p>
		</div>
		<nav>
		<div class="row main-nav">
			<div class="ham-div"><i class="ham-burger"></i></div>
			<div class="search-bar"><span class="icon-search"><img src="resources/icons/search2x.png" alt=""></span> <input type="text" placeholder="Search For a Product,Brand or Category"> </div>
			<div class="quad-button">
				<ul>
				<li><a href="#"><img src="resources/icons/mob-main2x.png" alt="playwin">play win</a></li>
				<li><a href="#"><img src="resources/icons/money-main.png" alt="playwin">add money</a></li>
				<li><a href="#"><img src="resources/icons/wallet-main.png" alt="playwin">royalpay wallet</a></li>
				<li><a href="#"><img src="resources/icons/login-main.png" alt="playwin">log in/sign up</a></li>
			</ul></div>
		</div>
		</nav>
	</header>
	<sidebar>
		
		<div id="sidebar-menu">
			<a href="#"><img src="resources/icons/mob2x.png" alt="mobile prepaid"><label for="mob-recharge">mobile prepaid</label></a>
			<a href="#"><img src="resources/icons/mob2x.png" alt="mobile postpaid"><label for="mob-recharge">mobile postpaid</label></a>
			<a href="#"><img src="resources/icons/bulb2x.png" alt="electricity"><label for="mob-recharge">eletricity</label></a>
			<a href="#"><img src="resources/icons/tv2x.png" alt="dth recharge"><label for="mob-recharge">DTH recharge</label></a>
			<a href="#"><img src="resources/icons/metro2x.png" alt="metro"><label for="mob-recharge">metro</label></a>
			<a href="#"><img src="resources/icons/telephone2x.png" alt="landline"><label for="mob-recharge">landline</label></a>
			<a href="#"><img src="resources/icons/broadband2x.png" alt="broadband"><label for="mob-recharge">broadband</label></a>
			<a href="#"><img src="resources/icons/fastag2x.png" alt="buy a fastag"><label for="mob-recharge">buy fastag</label></a>
			<a href="#"><img src="resources/icons/mob2x.png" alt="fee payment"><label for="mob-recharge">fee payment</label></a>
			<a href="#"><img src="resources/icons/royalpay-money2x.png" alt="royalpay money"><label for="mob-recharge">royalPay money</label></a>
			<a href="#"><img src="resources/icons/cylinder2x.png" alt="book a cylinder"><label for="mob-recharge">book a cylinder</label></a>
			<a href="#"><img src="resources/icons/more2x.png" alt="more"><label for="mob-recharge">more</label></a>
		</div>
		
	</sidebar>
	<main class="main-container">
		<div class="content-box">
			<h2>mobile recharge or bill payment</h2>
			<div class="radio-group">
				<input type="radio" id="prepaid" name="prepaid">
				<input type="radio" id="prepaid" name="prepaid">
			</div>
			
		</div>
		
	</main>
</body>

Erik_J · March 3, 2020, 1:04pm

Hi saeedcs98, welcome to the forums!

You’re not showing the CSS styling behind the screenshot so with the HTML you’ve got I guess you could try the old school way by floating the sidebar left of the main and apply overflow to make it aware of the float.

The principle:

sidebar {
  float: left;
}
main {
  overflow: hidden;
}

Please find out more about different layout techniques at e.g. CSS-Tricks or Mozilla Dev and others.

https://css-tricks.com/?s=layout&orderby=relevance&post_type=post%2Cpage%2Cguide

saeedcs98 · March 3, 2020, 1:15pm

No, Actually I fixed it in this way look here is the css

*{
	margin: 0 !important;
	padding: 0 ;
	font-family: 'Segoe UI';
	font-weight: 600;
	font-size:14px;
	color: #707070;
}
sidebar{
	position: fixed;
	z-index: 1000;
	
}
h1,h2,h3,h4,h5,h6{
	text-transform: capitalize;
}
input::placeholder{
	color: #707070;
}
.top-section{
	
	font-weight: 300;
	background: #F3F7F8;
	min-height: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40px 0 40px;
}

a{
	color: #707070;
	text-transform: capitalize;
	text-decoration: none;
	cursor: pointer;
}
a:hover{
	color: #707070;
	text-decoration: none;
}

.quad-button > ul > li  > a {
	font-family: 'Segoe UI';
	font-weight: 600;
	font-size: 16px;
}
.quad-button{
	
}

.quad-button > ul > li {
	display: inline-block;
	list-style: none;
	padding: 0 0 0 40px;
}
.quad-button > ul > li > a > img {
	width: 25px;
	height: 25px;
	margin-right: 5px !important;
	
}
.quad-button > ul {
	margin: 0;
	padding: 0;
}
.quad-button > ul a {
	display: block;
}

.main-nav {
	min-height: 74px;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40px 0 0;
	box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.2);
}


.search-bar input[type='text']{

width: 300px;
height: 35px;


}

.search-bar input[type='submit']{
/*border-right: 1px solid #000;*/
}
input{
	text-align: center;
	border-radius: 0 20px 20px 0px;
	border:2px solid #03B5E7;
}
input:focus{
	outline: none !important ;
}


.icon-search img {
	border: 2px solid #03B5E7;
	border-right: none;
	border-radius: 20px 0px 0 20px;
	height: 35px;
	padding: 5px 10px;
	float: left;
}

.input input{
	height: 35px;
	margin-right: 5px;
}
.icon-img img{
	border: 2px solid #03B5E7;
	border-right: none;
	border-radius: 20px 0px 0 20px;
	height: 35px;
	float: left;
	padding: 5px 10px;
	}
body{
	background: #F3F7F8;
}



.offer {
	padding: 1px 15px;
	border-radius: 20px;
	background: red;
	color: #fff;
}

#sidebar-menu {
	margin-top: 5px !important;
	width: 200px;
	height: auto;
	background: #03B5E7;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
}
#sidebar-menu a {
	display: block;
	color: #ffffff;
	text-align: center;
	padding-top: 50px;
	
}
#sidebar-menu a label {
	display: block;
	color: #ffffff;
	text-align: center;
	padding-top: 10px;
	
}



.main-container {
	width: 100% !important;
	padding-left: 20%;
	padding-top: 2%;
	display: flex;
	flex-direction: column;
	align-content: center;
}
.right{
	float: right !important;
}
.left{
	float:left !important;
}

.content-box {
	background: #fff;
	width: 90%;
	height: auto;
	box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);
	padding: 20px 40px;
	border-radius: 20px;
}

.radio-group label{
	font-size: 16px !important;
	text-transform: capitalize;
	padding: 5px 10px 0 0;
	
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

saeedcs98 · March 3, 2020, 1:16pm

this css was fix my issue is right way to do this kind of layout?
@Erik_J

Erik_J · March 3, 2020, 2:09pm

No, I’m afraid it is not.

If you want the sidebar to stay in viewport you could rather use “sticky” to make it stop scrolling at the edge of viewport.

The example sites I posted about layout techniques also goes through positioning:

PaulOB · March 3, 2020, 2:18pm

Off Topic

Please also note that there is no HTML element called ‘sidebar’. You should use valid HTML elements.

This also applies to the label element that you have nested inside an anchor. Anchors are not allowed to hold interactive content such as labels and could cause accessibility and usability problems.

Always run your html and css through the w3c validators to avoid these issues at the start.

saeedcs98 · March 4, 2020, 7:14am

ohh thanks

saeedcs98 · March 9, 2020, 8:50am

friend I use this way to achive the above layout and that was work pretty good except that I don’t know how but all elements stretch too much

look

*{
	margin: 0 !important;
	padding: 0 ;
	font-family: 'Segoe UI';
	font-weight: 600;
	font-size:14px;
	color: #707070;
}
html{
	 scroll-behavior: smooth;
}
body{
  display: grid;
  grid-template-columns: min-content 100%;
	
	

}

.swiper-slide label{
	display: block !important;
	text-transform: capitalize;
	text-align: center;
 	
}
.swiper-slide a{
	text-align: center;
 	
}

#sidebar-menu{
/*	position: sticky;*/
	white-space: nowrap;
	z-index: 99;
	
}
h1,h2,h3,h4,h5,h6{
	text-transform: capitalize;
}
input::placeholder{
	color: #707070;
}
.top-section{
	
	font-weight: 300;
	background: #F3F7F8;
	min-height: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40px 0 40px;
}

a{
	color: #707070;
	text-transform: capitalize;
	text-decoration: none;
	cursor: pointer;
}
a:hover{
	color: #707070;
	text-decoration: none;
}
header{
	grid-column: 1 / 3;
}
footer{
	grid-column: 1 / 3;
}
.quad-button > ul > li  > a {
	font-family: 'Segoe UI';
	font-weight: 600;
	font-size: 16px;
}
.quad-button{
	
}

.quad-button > ul > li {
	display: inline-block;
	list-style: none;
	padding: 0 0 0 40px;
}
.quad-button > ul > li > a > img {
	width: 25px;
	height: 25px;
	margin-right: 5px !important;
	
}
.quad-button > ul {
	margin: 0;
	padding: 0;
}
.quad-button > ul a {
	display: block;
}

.main-nav {
	min-height: 74px;
	background: #fff;
	display: flex;
	justify-content: space-between;
	
	align-items: center;
	padding: 0 40px 0 0;
	box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.2);
}


.search-bar input[type='text']{

width: 300px;
height: 35px;


}

.search-bar input[type='submit']{
/*border-right: 1px solid #000;*/
}
input{
	text-align: center;
	border-radius: 0 20px 20px 0px;
	border:2px solid #03B5E7;
}
input:focus{
	outline: none !important ;
}


.icon-search img {
	border: 2px solid #03B5E7;
	border-right: none;
	border-radius: 20px 0px 0 20px;
	height: 35px;
	padding: 5px 10px;
	float: left;
}

.input input{
	height: 35px;
	margin-right: 5px;
}
.icon-img img{
	border: 2px solid #03B5E7;
	border-right: none;
	border-radius: 20px 0px 0 20px;
	height: 35px;
	float: left;
	padding: 5px 10px;
	}




.offer {
	padding: 1px 15px;
	border-radius: 20px;
	background: #D54545;
	color: #fff;
	text-transform: uppercase;
}

#sidebar-menu {
	margin-top: 5px !important;
	width: 200px;
	height: auto;
	background: #03B5E7;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	 white-space: nowrap;
}
#sidebar-menu a {
	display: block;
	color: #ffffff;
	text-align: center;
	padding-top: 50px;
	position: sticky;
}
#sidebar-menu a label {
	display: block;
	color: #ffffff;
	text-align: center;
	padding-top: 10px;
	
}



.main-container {
/*	position: absolute;*/
    top: 90px;
	width: 100% !important;
	padding-left: 1%;
	padding-top: 2%;
	display: flex;
	flex-direction: column;
	align-content: center;
}
.right{
	float: right !important;
}
.left{
	float:left !important;
}

.content-box {
	background: #fff;
	width: 97%;
	height: auto;
	box-shadow:0px 5px 9px 5px rgba(0,0,0,0.3);
	padding: 20px 40px;
	border-radius: 20px;
}
.content-box-sm {
	background: #fff;
	width: 22%;
	height: auto;
	box-shadow:0px 5px 9px 5px rgba(0,0,0,0.3);
	padding: 20px 40px;
	
	border-radius: 20px;
}

.radio-group label{
	font-size: 16px !important;
	text-transform: capitalize;
	padding: 5px 10px 0 0;
	
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}
select{
	height: 35px;
	border-radius: 0 20px 20px 0;
	border: 2px solid #03B5E7;
	width: 12rem;
}
select:focus,select:focus-within{
	outline: none;
}
.text {
	vertical-align: middle;
}

.link {
 color: #03B5E7;
cursor: pointer;
font-weight: 600;
}
.none{
	display: none;
}

.btn-color {
	background:#03B5E7;
	letter-spacing: 0.5px;
	font-size: 18px;
	padding: 15px 35px;
	border-radius: 30px;
	
}
.main-color{
	color: #03B5E7;
}
h3.main-color::before{
/*	content: url("resources/icons/fast-forward2x.png");*/
/*
	background-repeat: no-repeat;
	background-position:center;
	background-size:20px 20px;
*/
/*	content: 'here\'s before';*/
}
button{
	text-transform: capitalize;
	color: #fff !important;
	font-weight: 700 !important;
	
}


/*
.checkbox-label input{
	opacity: 0;
	position: absolute;
	cursor: pointer;
}
.checkbox-label .checkbox-custom{
	position: absolute;
	top: 0;
	left: 0;
	height: 24px;
	width: 24px;
	background-color: transparent;
	border-radius: 5px;
	border: 2px solid #03B5E7;
}
.checkbox-label .checkbox-custom::after{
	position: absolute;
	content: "";
	top: 12px;
	left: 12px;
	height: 0px;
	width: 0px;
	border-radius: 5px;
	border:  solid #d3d3d3;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(0deg) scale(0);
	-ms-transform: rotate(0deg) scale(0);
	transform: rotate(0deg) scale(0);
	opacity: 1;
}

.checkbox-label input:checked ~ .checkbox-custom{
	border-radius: 5px;
	border: 2px solid #d3d3d3;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(0deg) scale(1);
	-ms-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
	opacity: 1;
}

.checkbox-label input:checked ~ .checkbox-custom::after{
	top: 3px;
	left: 8px;
	height: 12px;
	width: 6px;
	border-radius: 5px;
	border:  solid #03B5E7;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(0deg) scale(0);
	-ms-transform: rotate(0deg) scale(0);
	transform: rotate(0deg) scale(0);
	opacity: 1;
	background-color: transparent;
	border-radius: 0;
}
*/
.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
	z-index: 99;
	left: 6px;
    top: 6px;
}

.checkbox-label .checkbox-custom {
    position: absolute;
	cursor: pointer;
    top: 2px;
    left: 0px;
    height: 24px;
    width: 24px;
    background-color: transparent;
    border-radius: 50%;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border: 2px solid #03B5E7;
}


.checkbox-label input:checked ~ .checkbox-custom {
    background-color: #03B5E7;
    border-radius: 50%;
    -webkit-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity:1;
    border: 2px solid #707070;
}


.checkbox-label .checkbox-custom::after {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    height: 0px;
    width: 0px;
    border-radius: 50%;
    border: solid #009BFF;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    opacity:1;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}


.checkbox-label input:checked ~ .checkbox-custom::after {
/*
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  opacity:0;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #009BFF;
  border-width: 0 2px 2px 0;
*/
  background-color: transparent;
  border-radius: 0;
}



/* For Ripple Effect */
/*
.checkbox-label .checkbox-custom::before {
    position: absolute;
    content: "";
    left: 10px;
    top: 10px;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    border: 2px solid #03B5E7;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);    
}
*/

.checkbox-label input:checked ~ .checkbox-custom::before {
    left: -3px;
    top: -3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    opacity:0;
    z-index: 999;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}





.clear-fix {
	height: 5rem;
	
	background-color: transparent;
}

.center {
	display: flex;
	justify-content: center;
}

/*
    position: relative !important;
	top: -32px !important;
	left: 0 !important;
*/



.next-box {
	
    background: #fff;
    width: 100px;
    height: 64px;
    /* color: #fff !important; */
    /* font-size: 0px; */
    position: relative;
    border-radius: 15px 0 0 15px;
    top: 0;
    left: 40px;
    border: 2px solid #707070;
    border-right: none;
}

/*
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: 19px !important;
    left: auto !important;
    top: 15px !important;
    border: 1px solid #07baf4 !important;
    width: 30px !important;
    height: 30px !important;
    border-width: 6px !important;
    border-left: 0 !important;
    border-top: 0 !important;
    transform: rotate(135deg) !important;
}
.swiper-button-next:focus{
	outline: none;
}
*/

.h-3{
	height: 300px !important;
}.h-4{
	height: 400px !important;
}.h-5{
	height: 500px !important;
}.h-6{
height: 600px !important;
}
.slider-wrapper{
	display: relative;
	overflow: hidden;
	float: left;
	padding: 0px;
/*    border: 1px solid #000;*/
	list-style: none;
	
}
.slider-wrapper li{
	display: none;
}
.slider-wrapper li.active{
	display: inline-block;
}
.prev,.next{
	float: left;
	margin-top: 130px;
	cursor: pointer;
}
.prev{
	display: inline;
	position: relative;
	margin-right: -45px !important;
	    top: 211px;
	z-index: 100;
}
.next{
		display: inline;

	position: relative;
	margin-left: -45px !important;
	    top: 190px;
	z-index: 100;
}
.col-md-6{
	padding: 0;
}
.col-md-6.d-flex {
    flex-direction: column;
}

.slider-bottom{
	display: block;
	position: relative;
}
.slider-bottom ul{
		display: flex;
	justify-content: space-between;
		align-items: center;
		position: relative;
		list-style: none;

}
.slider-bottom li {
    display: block;
    padding: 30px 30px;
    height: 147px;
    width: 140px;
    text-align: justify;
    background: #000;
	border: 1px solid #d3d3d3;
	border-top:none;
}
.slider-bottom li:last-child {
	border-right: none;
}
.slider-bottom ul li label{
	
}














.category-card {
	display: block;
	width: 120px;
	height: auto;
}

.category-wrapper {
	display: flex;
	position: relative;
	justify-content: space-around;
}
.category-card img {
	border-radius: 50%;
}
.category-card p {
	width: 100px;
	text-align: center;
}

.card-heading img {
			border-radius: 50%;
}


.product-card img {
	border-radius: 4px;
}.product-card p {
	text-transform: capitalize;
	text-align: center;
	width: 200px;
}



.summary-box {
	display: flex;
	justify-content: space-between;
	
}
.summary-box p,.summary-box h4{
		color: #03b5e7;
		text-align: center;
		line-height: 1.3rem;
		text-transform: capitalize;	
		
}
.summary-box p {
	margin-top: 10px !important; 	
}
.summary-box .col-sm-4:first-child{
	border-right: 3px solid #ccc;
	padding: 0;
}

.summary-wrapper {
	display: flex;
	justify-content: space-around;
	padding-left: 0px;
}

#footer-links {
	background-color: #03b5e7;
	height: 100px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.links a{
	color: #fff;
	font-size: 18px;
	padding: 0 20px 0 10px;
	
}



.social-links ul {
/*
	display: flex;
	justify-content: space-around !important;
	list-style: none;
*/
	
}
#social-icons{
	display: inline-flex;
	justify-content: space-around;
	list-style: none;
}
.social-links ul li{
	padding-right: 20px;
}

.affiliate-icon {
	display: flex;
	width: 80%;
	justify-content: space-around;
	align-items: center;
	padding: 10px; 0 0 0;
}
.affiliate-icon p{
	text-align: left;
	text-transform: capitalize;
}


#short-links h3 {
	color:#03b5e7;
}
#short-links label{
	text-transform: capitalize;
	font-size: 18px;
	font-weight: 400;
	cursor: pointer;
	padding: 20px;
}
.actived-link{
	border-bottom: 3px solid #03b5e7;
	border-radius: 2px;
}
.fa-caret-down:before{
    content: "\f0d7";
    margin-left: 20px;
    color: #000;
}
.dropdown-links{

	background-color: #f5f8f9;
	padding: 20px 10px;
}
.dropdown-links ul{
	display: flex;
	justify-content: space-around;
	list-style: none;
	align-items: center;
		
}

.product-wrapper{
	float: left;
	overflow: hidden;
	padding: 15px;
	width: 100%;
	position: relative;
}

.product-wrapper .product-wrapper-inner {
	transition: 1s ease all;
	float: left;
}

.product-wrapper .product-wrapper-inner .product-card {
	float: left;
}

.product-wrapper .product-wrapper-inner .product-card > div {
	text-align: center;
	padding: 10px;
	margin: 10px !important;
	background: #f1f1f1;
	color: #666;
}

.product-wrapper .leftLst,
.product-wrapper .rightLst {
	position: absolute;
	border-radius: 50%;
	top: calc(50% - 20px);
}

.product-wrapper .leftLst {
	left: 0;
}

.product-wrapper .rightLst {
	right: 0;
}

.product-wrapper .leftLst.over,
.product-wrapper .rightLst.over {
	pointer-events: none;
	background: #ccc;
}
.ham-div {
	margin-left: 3% !important;
}

PaulOB · March 10, 2020, 1:24pm

Hi,

It seems you are trying to run before you can walk as there are a lot of basic errors in that code and a lot of concepts that are misunderstood.

I can’t offer full code or shortcuts but can perhaps point you in the right direction.

It seems you are using CSS grid which is all fine and well but is the most complicated of all the CSS properties and needs a great depth of understanding before you can manipulate it properly. Therefore copying snippets from somewhere else and then trying to bend it to your will is very difficult (even for me).

It looks as though you should have a 2 column grid with your left column at the 200px width of your sidebar and the header and footer spanning both columns.

e.g.

body{
  display: grid;
  grid-template-columns: 200px auto;
}
header{
	grid-column: 1 / span 2;
}
footer{
	grid-column: 1 / span 2;
}

Then you need to remove the 100% width from your main section because 100% + 200px for the sidebar (plus any margins or padding) is going to be too wide for anything as you can’t get more than 100%.You don;t actually need any width anyway.

.main-container {
/*	position: absolute;*/
    /*top: 90px;
*/	/*width: 100% !important; no width needed and stop using !important*/
	padding-left: 1%;
	padding-top: 2%;
	display: flex;
	flex-direction: column;
	align-content: center;
}
.content-box {
	background: #fff;
	/*width: 97%;*/
	margin-right:1rem;/* stop box-shadow going off the viewport*/
	height: auto;
	box-shadow:0px 5px 9px 5px rgba(0,0,0,0.3);
	padding: 20px 40px;
	border-radius: 20px;
}

You used the universal selector to reset some properties and indeed you added !important to margin:0 which means that you can never use a margin again in your layout without using !important. Stop using !important altogether.

Most of the other properties in your universal selector rule will kill inheritance and spoil the cascade which is the whole point of CSS as the ‘C’ Stands for Cascde!

/* don't use the universal selector but use a proper CSS reset instead */
*{
	/*margin: 0 !important; no no no - stop using !important*/
	margin:0;/* will break some form elements*/
	padding: 0 ;/* will break some form elements*/
	font-family: 'Segoe UI';
	font-weight: 600;/* kills inheritance very bad*/
	font-size:14px;/* kills inheritance very bad*/
	color: #707070;/* kills inheritance very bad*/
}

Use a proper CSS reset instead (google CSS resets to understand this better).

There is no short cut to coding and you do need to study all the properties that you are going to use. I would not have used CSS grid for this as its a simple 2 column layout and flex would have done the job more easily (or indeed the display:table/table cell properties could easily manage this with greater support).

However whatever you use you must research and understand how it all ties together. CSS grid is pretty complex and its actually easier to build your own grid rather than modify someone else’s structure.

saeedcs98 · March 11, 2020, 8:51am

@PaulOB I really appreciate your advice that fits to me every way and thank you to guide me in a right direction cause these shortcuts could helps me in only temporarily and you’re guide me to a professional way to solve these kind of problems

system · June 10, 2020, 3:51pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Can't place 2 divs next to each other HTML & CSS	3	2906	February 22, 2011
I need help designing this layout HTML & CSS	16	1010	February 26, 2010
Screwed up my sidebar! HTML & CSS	10	626	April 7, 2019
Simple sidebar problem HTML & CSS	16	7380	April 17, 2015
Need help to put the sidebar in right side HTML & CSS	12	23336	November 29, 2014

How to put main element next to sidebar?

Related topics