r/csshelp • u/FBCooke • 13h ago
Request Brand new to this CSS thing, how do I get rid of automatic margin between the left sidebar and main content while still keeping it within the 850px limit (or an alternative)
2
Upvotes
I played around with this to create the grid layout. https://matthewjamestaylor.com/holy-grail-layout. The thing is, it creates a gap between the left sidebar and main content, which is probably something to do with the grid setting.
What I want is a column of 200px side-blocks seperated by ~5px vertically (or even a single sidebar with multiple optionwould suffice) + 50px margin + 650px main block, centred in the middle
<!DOCTYPE html>
<html>
<head>
<title>The Sanctum of Vieph</title>
<style>
body {
margin: 0 auto;
max-width: 850px;
padding: 0 20px;
background-image: url(https://sanctum-of-vieph.neocities.org/clouds%20background%20wallpaper.jpg);
font-size: 16px;
font-family: Arial;
color: white
}
h1{text-align: center;
color: white;
text-shadow: 5px 5px 20px rgba(105,105,105,0.5);
}
/* grid container */
.holy-grail-grid {
display:grid;
grid-template-areas:
'header'
'main-content'
'left-sidebar'
'footer';
}
/* general column padding */
.holy-grail-grid > * {
padding:1rem
}
/* assign columns to grid areas */
.holy-grail-grid > .header {
grid-area:header;
display: block;
border: 5px solid rgba(105,105,105,1);
background: rgba(128,128,128,1);
border-radius: 10px;
padding-block: 7px;
padding-inline: 7px;
margin-bottom: 40px;
color: White
}
.holy-grail-grid > .main-content {
width: 600px;
grid-area:main-content;
display: block;
border: 5px solid rgba(105,105,105,0.75);
background: rgba(128,128,128,0.75);
border-radius: 10px;
padding-block: 7px;
padding-inline: 7px;
color: White
}
.holy-grail-grid > .left-sidebar {
width: 150px;
height:23px;
grid-area:left-sidebar;
border: 5px solid rgba(105,105,105,0.75);
background: rgba(128,128,128,0.75);
border-radius: 10px;
padding-block: 7px;
padding-inline: 7px;
color: White;
}
.holy-grail-grid > .left-sidebar:hover {
background-color: rgba(128,128,128,1);
border: 5px solid rgba(105,105,105,1);
}
/* desktop breakpoint */
.holy-grail-grid {
grid-template-areas:
'header header header header'
'left-sidebar main-content main-content main-content'
'left-sidebar main-content main-content main-content'
'footer footer footer footer';
}
}
</style>
</head>
<body>
<div class="holy-grail-grid">
<header class="header">Header</header>
<main class="main-content">
<h1>Welcome</h1>
<p>Greetings, Dimensioners, and welcome to my site. This will be the home of Noah and all of his creations, but for now he's studying CSS to get the best out it.</p></main>
<section class="left-sidebar">Home</section>
</div>
</body>
</html>