I hope you're well!
I am a bit new in writing css and I would like to achieve this result, but how?
Here is my try and I will be grateful for any advice and explanations.
<style>
#wrapper {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(6, 1fr);
}
#left{
text-align: left;
grid-column: 1/4;
margin-top: 2px;
background-color: red;
height: 200px;
}
#right {
text-align: right;
height: 100px;
padding-top: 10px;
margin-top: 2px;
grid-column: 4/6;
background-color: blue;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left" > div1 </div>
<div id="right" style="height:50px;"> div2 </div>
<div id="right" > div3 </div>
<div id="right" style="height:50px;"> div4 </div>
</div>
</body>
I think it's generally useful to think of these kinds of things as big blocks that contain smaller blocks. From that perspective you first have a layout with two columns, which you can achieve with a couple of simple grid or flex rules. There are many ways to do this, but here it is using grid:
.main-layout {
display: grid;
grid-template-columns: .35fr 1fr;
gap: 1rem;
min-height: 70vh;
}
.sidebar {
padding: 1rem;
background: skyblue;
}
.content {
padding: 1rem;
background: aliceblue;
}
<div class="main-layout">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
Once you have that, you can fill in the "content" block without thinking much about the outer layout. This makes it pretty straightforward:
section {
padding: 0.5em;
margin-bottom: 1rem;
background: lightblue;
}
h1 {
font-size: 1.2rem;
margin: 0;
border-bottom: 1px solid white;
}
/* outer layout -- same as before */
.main-layout {
display: grid;
grid-template-columns: .35fr 1fr;
gap: 1rem;
min-height: 70vh;
}
.sidebar {
padding: 1rem;
background: skyblue;
}
.content {
padding: 1rem;
background: aliceblue;
}
<div class="main-layout">
<div class="sidebar">sidebar</div>
<div class="content">
<section>
<h1>This is a heading</h1>
<p>And this is content</p>
</section>
<section>
<h1>This is a heading</h1>
<p>And this is content</p>
</section>
<section>
<h1>This is a heading</h1>
<p>And this is content</p>
</section>
</div>
</div>
Related
I want divide my HTML Page into 4 different vertical sections .
I want each section to have a different background color, for that I used div but it each background color does not cover the sides of each section.
** My aspire end result:
I don't want to see the color red of the body background color in the html.
body {
background-color: red;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="intro">
<hr>
</div>
<div class="edu">
<hr>
</div>
<div class="Skills">
<hr>
</div>
<div class="end">
<hr>
</div>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-container>div {
margin:30px;
}
.flex-container hr {
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border-color: #FFF;
box-shadow: none;
border-width: 5px;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="flex-container">
<div class="intro"><hr></div>
<div class="edu"><hr></div>
<div class="Skills"><hr></div>
<div class="end"><hr></div>
</div>
Set margin: 0 for body, it has a defualt margin.
Set <hr>'s margin to 0.
Set height for each div to be 25vh (vertical height).
body {
background-color: red;
margin: 0;
}
.intro {
background-color: #674AB3;
height: 25vh;
}
.edu {
background-color: #A348A6;
height: 25vh;
}
.Skills {
background-color: #9F63C4;
height: 25vh;
}
.end {
background-color: #9075D8;
height: 25vh;
}
hr {
margin: 0;
}
<div class="intro">
<hr/>
</div>
<div class="edu">
<hr/>
</div>
<div class="Skills">
<hr/>
</div>
<div class="end">
<hr/>
</div>
You could try using grid! might as well make it responsive :D
This is to have 4 sections laying one next to another, to make them stack in the vertical direction, change:
grid-template-columns: repeat(4, 1fr);
to:
grid-template-rows: repeat(4, 1fr);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #00000000; /* transparent color */
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 vertical sections */
height: 100vh;
margin: auto;
}
.intro {
background-color: #674AB3;
}
.edu {
background-color: #A348A6;
}
.Skills {
background-color: #9F63C4;
}
.end {
background-color: #9075D8;
}
<div class="intro">
<p>intro</p>
</div>
<div class="edu">
<p>edu</p>
</div>
<div class="Skills">
<p>Skills</p>
</div>
<div class="end">
<p>end</p>
</div>
Something like this?
body {
background-color: red;
}
.intro {
height:200px;
background-color: #674AB3 !important;
}
.edu {
height:200px;
background-color: #A348A6 !important;;
}
.Skills {
height:200px;
background-color: #9F63C4 !important;;
}
.end {
height:200px;
background-color: #9075D8 !important;;
}
<div class="intro">
<hr>
</div>
<div class="edu">
<hr>
</div>
<div class="Skills">
<hr>
</div>
<div class="end">
<hr>
</div>
You can try this approach as well.
body {background-color:transparent;}
.intro {
background-color: #674AB3;
height:100vh;
width:100%;
}
.edu {
background-color: #A348A6;
height:100vh;
width:100%;
}
.Skills {
background-color: #9F63C4;
height:100vh;
width:100%;
}
.end {
background-color: #9075D8;
height:100vh;
width:100%;
}
.wrapper {
display:grid;
height:100vh;
width:100%;
}
<div class="wrapper">
<div class="intro">
Hello
</div>
<div class="edu">
Hello
</div>
<div class="Skills">
Hello
</div>
<div class="end">
Hello
</div>
</div>
You can simmply use display: flex to the parent container which is flex-container
like
<div style="display: flex;">
<div class="intro"><hr></div>
<div class="edu"><hr></div>
<div class="Skills"><hr></div>
<div class="end"><hr></div>
</div>
<div class="intro">
</div>
<div class="edu">
</div>
<div class="Skills">
</div>
<div class="end">
</div>
</div>
body {
background-color: red;
}
.main{
display: flex;
grid-template-columns: repeat(4,1fr);
width:100vw;
}
.intro {
background-color: #674AB3;
width: 25%;
height: 75vh;
}
.edu {
background-color: #A348A6;
width: 25%;
height: 75vh;
}
.Skills {
background-color: #9F63C4;
width: 25%;
height: 75vh;
}
.end {
background-color: #9075D8;
width: 25%;
height: vh;
}
grid
<div class="main">
<div class="intro">
</div>
<div class="edu">
</div>
<div class="Skills">
</div>
<div class="end">
</div>
.main{
display: flex;
grid-template-columns: repeat(4,1fr);
width:100vw;
}
.intro {
background-color: #674AB3;
width: 25%;
height: 75vh;
}
.edu {
background-color: #A348A6;
width: 25%;
height: 75vh;
}
.Skills {
background-color: #9F63C4;
width: 25%;
height: 75vh;
}
.end {
background-color: #9075D8;
width: 25%;
height:75vh;
}
Its important that I use grid-template-rows to define the height of the elements as I want the proportions to stay accurate dynamically. However I don't know how to get the line-height of a given row to center its text vertically. Im resorting to some hacky padding stuff that I dont like.
Example code below
#wrapper {
height: 100%;
}
#profile {
height: 100%;
border: 1px solid black;
display: grid;
grid-template-rows: 5fr 1fr 1fr 1fr 1fr 1fr;
}
#pfp {
height: 85%;
width: 85%;
border: 1px solid black;
margin: 1.5em auto 1.5em auto;
}
.info {
border: 1px solid black;
font-weight: bold;
padding-left: 1em;
line-height: 100%;
}
<section id="wrapper">
<h3 id="heading">Heading</h3>
<div id="profile">
<div id="imageFrame">
<div id="pfp"></div>
</div>
<div class="info" id="name">Name: </div>
<div class="info" id="username">Username: </div>
<div class="info" id="email">Email: </div>
<div class="info" id="location">Location: </div>
<div class="info" id="occupation">Occupation: </div>
</div>
</section>
Setting line-height by percentage does not work but as the height of the element is relative to the height of the browser window, I dont know how to get it to center the text of the .info elements
just need to apply flexbox to the elements: .info { display: flex; }. Then you can center the text by using: .info { align-items: center; }
#profile {
min-height: 80vh;
border: 1px solid black;
display: grid;
grid-template-rows: 5fr 1fr 1fr 1fr 1fr 1fr;
}
#pfp {
height: 60%;
width: 85%;
border: 1px solid black;
margin: 1.5em auto 1.5em auto;
}
.info {
border: 1px solid black;
font-weight: bold;
padding-left: 1em;
line-height: 100%;
display: flex;
align-items: center;
}
<section id="wrapper">
<h3 id="heading">Heading</h3>
<div id="profile">
<div id="imageFrame">
<div id="pfp"></div>
</div>
<div class="info" id="name">Name: </div>
<div class="info" id="username">Username: </div>
<div class="info" id="email">Email: </div>
<div class="info" id="location">Location: </div>
<div class="info" id="occupation">Occupation: </div>
</div>
</section>
I have a layout that is a sidebar and a grid both wrapped in a flexbox. I'd like to put a div underneath the grid so it can have prev/next buttons, like in this image, but I can't figure out how to do that. The grid resizes itself with the window so the grid can take as many rows as necessary and then the div should go below that, and be as wide as the grid.
This is what I have, but the div is on the right of the grid:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boardgame Database</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
aside {
background-color: red;
flex: 1;
min-width: 250px;
}
.grid-container {
flex: 4;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
}
#flex-container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
</style>
</head>
<body>
<div id="flex-container">
<aside class="sidebar">
</aside>
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
</section>
<div id="page-buttons">
prev
next
</div>
</div>
Checkout the following Code.
#main{
display :flex;
}
#sidebar{
width:70px;
height: 300px;
border: solid black 1px;
}
#grid-area{
width:200px;
height: 300px;
border: solid black 1px;
display: block;
}
#grid{
width:200px;
height: 250px;
border: solid black 1px;
display: block;
}
<div id="main">
<div id="sidebar"></div>
<div id="grid-area">
<div id="grid"></div>
<div id="button">next / prev</div>
</div>
</div>
You should use nested flex containers. Section and bottom div should be wrapped inside another flex container with flex direction to column.
So outer flex will make sidebar & inner flex container to be side by side.
Or just use a normal div container instead of flex.
here is another example only with grid keeping the pre/next button at the bottom of the viewport:
body {
margin: 0;
}
#grid-container {
display: grid;
height: 100vh;
grid-template-columns: minmax(250px, 1fr) 4fr;
grid-template-rows: 1fr auto;
}
aside {
background-color: red;
border: 1px solid;
margin: 0.25em;
grid-row: span 2;
grid-column: 1;
}
section,
#page-buttons {
grid-column: 2;
border: solid 1px;
margin: 0.25em;
}
section {
overflow: auto;
}
#page-buttons {
display: flex;
gap: 1em;
padding: 0.5em;
background: lightgray;
justify-content: center;
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
}
<div id="grid-container">
<aside class="sidebar">
</aside>
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
</section>
<div id="page-buttons">
prev
next
</div>
</div>
Why my .topnav, .mainnav and my .content divs the content escapes them?
How can I make when I reach the page limit jump from line?
They are already 100% width
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
display: grid;
grid-template-columns: 280px 1fr;
width: 100%;
height: 100%;
position: fixed;
}
.leftbar {
background: #1D2126;
height: 100%;
width: 100%;
grid-template-rows: 100px 1fr;
}
.rightbar {
display: grid;
grid-template-rows: 100px 1fr;
width: calc(100%-280px);
height: 100%;
position: fixed;
margin-left: 280px;
}
.header {
display: grid;
grid-template-rows: 30px 70px;
width: 100%;
height: 100%;
}
.topnav {
background: #1A1E23;
}
.mainnav {
background: #1D2126;
}
.content {
background: #21252B;
overflow-y: scroll;
}
<div class="container">
<div class="leftbar">
<div class="logo"><img src="https://www.csgoroll.com/en/assets/logo.png" width="80%"></div>
<div class="chat">
<div class="chatbox">
</div>
<div class="chatsend">
</div>
</div>
</div>
<div class="rightbar">
<div class="header">
<div class="topnav">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="mainnav">d</div>
</div>
<div class="content">
asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaassssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
</div>
You have two reasons for that:
First you have an endless text starting "aaaa" so if you don't break the text (with spaces or using CSS) the layout will follow the text
Second when using the calc() function in CSS, using addition and subtraction operations, it is mandatory to leave spaces around the operator, so instead of width: calc(100%-280px);
you need to have width: calc(100% - 280px);
Look the snippet below (with some minor improvements to your code)
* {
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
a {
text-decoration: none;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
display: grid;
grid-template-columns: 280px 1fr;
height: 100%;
}
.leftbar {
background: #1D2126;
height: 100%;
}
.rightbar {
display: grid;
grid-template-rows: 100px 1fr;
}
.header {
display: grid;
grid-template-rows: 30px 70px;
}
.topnav {
background: #1A1E23;
}
.mainnav {
background: #1D2126;
}
.content {
background: #21252B;
overflow-y: scroll;
}
.logo img {
width: 80%
}
<body>
<div class="container">
<div class="leftbar">
<div class="logo">
<img src="https://www.csgoroll.com/en/assets/logo.png" />
</div>
<div class="chat">
<div class="chatbox">
</div>
<div class="chatsend">
</div>
</div>
</div>
<div class="rightbar">
<div class="header">
<div class="topnav">aaaa</div>
<div class="mainnav">d</div>
</div>
<div class="content">aaaa
</div>
</div>
</div>
This question already has answers here:
CSS Grid - Auto height rows, sizing to content
(3 answers)
Closed 3 years ago.
I have following problem: if there is content in first container, then the other two without content will be the same height as the first one:
https://jsfiddle.net/tj4hbya5/2/
.grid {
padding: 5px;
background: gray;
display: grid;
grid-template-columns: auto auto auto;
}
.todo-column {
min-height: 150px;
margin: 0 auto;
width: 90%;
background: cyan;
text-align: center;
}
.todo-title {
color: white;
font-size: 175%;
padding: 5px;
border-bottom: 5px dotted black;
}
<div class="grid">
<div class="todo-column">
<h1 class="todo-title">Aloittamatta</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Työn alla</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Valmis</h1>
</div>
</div>
So, how can I set the default height to be the same on all three containers, but if one of them has some content, then the height will be choosen automatically, while the other two without content stay at min-height?
Add align-items: self-start; in ".grid" class and set min-height in ".todo-column" class
.grid {
padding: 5px;
background: gray;
display: grid;
grid-template-columns: auto auto auto;
align-items:self-start;
}
.todo-column {
min-height: 150px;
margin: 0 auto;
width: 90%;
background: cyan;
text-align: center;
}
.todo-title {
color: white;
font-size: 175%;
padding: 5px;
border-bottom: 5px dotted black;
min-height: 100px;
}
<div class="grid">
<div class="todo-column">
<h1 class="todo-title">Aloittamatta</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Työn alla</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Valmis</h1>
</div>
</div>
.grid {
padding: 5px;
background: gray;
display: grid;
grid-template-columns: auto auto auto;
align-items: start;
}
.todo-column {
min-height: 150px;
margin: 0 auto;
width: 90%;
background: cyan;
text-align: center;
}
.todo-title {
color: white;
font-size: 175%;
padding: 5px;
border-bottom: 5px dotted black;
}
<div class="grid">
<div class="todo-column">
<h1 class="todo-title">Aloittamatta</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Työn alla</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Valmis</h1>
</div>
</div>