I tried to replicated a time table from my school, but my divs are shifting down and can’t find any reason why. It doesn’t seem to have anything to do with text or not having any space, because it’s set to inline-flow.
Link to pen: https://codepen.io/BestCactus/pen/rNgMWGK
HTML
<body>
<div id="card">
<div id="headingDiv">
<h1 id="mainHeading">Rozvrh 1.A</h1>
</div>
<section id="table">
<div class="divOfWeek">
<h2 class="dOfWeek">PO</h2>
<h2 class="dOfWeek">ÚT</h2>
<h2 class="dOfWeek">ST</h2>
<h2 class="dOfWeek">ČT</h2>
<h2 class="dOfWeek">PÁ</h2>
</div>
<article class="articleTable">
<div class="subject">
<p class="subName">Fy</p>
<p class="subInformation"><em>MIJ - </em><strong>407</strong></p>
</div>
<div class="subject">
<p class="subName">M</p>
<p class="subInformation"><em>Re - </em><strong>404</strong></p>
</div>
<div class="subject">
<p class="subName">Z</p>
<p class="subInformation"><em>Re - </em><strong>204</strong></p>
</div>
<div class="subject">
<p class="subName">Nj</p>
<p class="subInformation"><em>MOJ - </em><strong>316</strong></p>
</div>
<div class="subject">
<p class="subName">Aj</p>
<p class="subInformation"><em>LL - </em><strong>308</strong></p>
</div>
<div class="subject">
<p class="subName">ZSV</p>
<p class="subInformation"><em>VkD - </em><strong>204</strong></p>
</div>
<div id="hiddenSubject"class="subject">
<p class="subName"></p>
<p class="subInformation"><em><em><strong></strong></p>
</div>
<div class="subject">
<p>EV</p>
</div>
<div class="subject">
<p>EV</p>
</div>
</article>
</section>
</div>
</body>
</html>
CSS
:root {
--background-color: #242424;
--card-color: #666665;
}
body {
font-family: "Radio Canada Big", sans-serif;
background-color: var(--background-color);
}
#card {
background-color: var(--card-color);
width: 80%;
height: 600px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
box-shadow: 10px 10px 12px 7px rgba(0, 0, 0, 0.2);
}
#card * {
color: white;
}
#table {
height: 88%;
display: flex;
align-items: flex-start;
justify-content: left;
grid-column-gap: 50px;
flex-flow: row;
}
.divOfWeek {
height: 100%;
display: inline-flex;
align-items: flex-start;
justify-content: space-between;
flex-flow: column;
margin-left: 5%;
}
#mainHeading {
text-align: center;
padding-top: 10px;
}
#headingDiv {
height: 12%;
justify-content: center;
}
.subject {
width: 80px;
height: 80px;
border-radius: 15px;
background-color: var(--background-color);
text-align: center;
}
.articleTable {
background-color: aqua;
display: inline-flex;
flex-flow: row;
justify-content: space-between;
grid-column-gap: 20px;
grid-row-gap: 20px;
vertical-align: top; <--
}
.subInformation {
font-size: 10px;
}
.subName {
margin-bottom: 1px;
}
#hiddenSubject {
visibility: hidden;
}
I tried the vertical-align: top; but that’s not going to solve anything as the text doesn’t change the shifting. I guess it could be something with the padding or margins but no idea what… I’m probably just super dumb and someone asked this already like 1000x times so I’m sorry…
New contributor
Cactusss is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.