menu

Questions & Answers

CSS - buttons don't align properly

No matter what I do (for a few hours now) I cannot align <div class="kafelek"> next to each other; the code currently looks like this:

body {
  background-color: #003C3D;
}

.header {
  text-align: center;
  align-content: center;
  padding: 20px;
  font-family: 'Open Sans';
  font-size: 24px;
  color: #C3CECB;
}

#headerlogo {
  width: 400px;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: slide-in 1s ease-in-out forwards;
}

@keyframes slide-in {
  from {
    top: -100px;
  }
  to {
    top: 20px;
  }
}

.pre1 {
  width: 50%;
  text-align: center;
  align-content: center;
  font-family: 'Open Sans';
  font-size: 24px;
  color: #C3CECB;
  float: left;
}

.pre2 {
  width: 50%;
  text-align: center;
  align-content: center;
  font-family: 'Open Sans';
  font-size: 24px;
  color: #C3CECB;
  float: right;
}

.alignkafel1,
.alignkafel2 {
  display: flex;
  flex-wrap: wrap;
}

.row {
  display: flex;
}

.kolumna {
  display: inline-block;
  width: 48%;
  font-family: 'Open Sans';
  color: #C3CECB;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.kolumna:first-child {
  margin-right: 0px;
}

.kolumna:last-child {
  margin-left: 0px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 800px) {
  .kolumna {
    width: 100%;
    align-content: center;
  }
}

kolumna2 {
  display: inline-block;
  width: 48%;
  font-family: 'Open Sans';
  color: #C3CECB;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.kolumna2:first-child {
  margin-right: 0px;
}

.kolumna2:last-child {
  margin-left: 0px;
}

@media screen and (max-width: 800px) {
  .kolumna2 {
    width: 100%;
    align-content: center;
  }
}

.kafelek {
  background-color: #006D57;
  border-radius: 10px;
  text-align: center;
  height: 100px;
  font-family: 'Open Sans';
  font-size: 20px;
  color: #C3CECB;
  margin: 5px;
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 1px;
  margin-left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 800px) {
  .kafelek {
    display: flex;
    justify-content: center;
  }
}

.kafelek:hover {
  border: 2px solid #7EDF00;
  transition: 0.3s;
  cursor: pointer;
}
<div class="header">
  <img src="" img id="headerlogo" />
  <br /> <br /> Centrum zgłoszeniowe AOK
</div>

<div class="pre1"> Delivery Support </div>
<div class="pre2"> Middle Mile</div>



<div class="alignkafel1">
  <div class="kafelek">Koszta Dodatkowe</div>
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
</div>

<div class="alignkafel2">
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
</div>

I've been trying with multiple options but everything gets messed up in the end.

It looks like this: Messed up website

And I want each of the 8 .kafelek (which are the buttons) to be perfectly aligned in 1 row with each other and also properly centered to align with .pre1 and .pre2

Please help ;-;

Comments:
2023-01-19 00:20:11
your .alignkafel1 flex container has zero width. You can quickly attempt to solve it just giving it width: 100% but maybe there are some other layout problems
2023-01-19 00:20:11
I basically fixed it like that And it does work, but the buttons aren't centered properly.
Answers(4) :

I removed .alignkafel1 and .alignkafel2 classes and replaced them with a single .alignkafel class with CSS Flex. The flex-direction: row property is used for .alignkafel class to give the desired layout. I additionally removed the unused CSS classes from the code.

You can see the following example:

body {
  background-color: #003C3D;
}

.header {
  text-align: center;
  align-content: center;
  padding: 20px;
  font-family: 'Open Sans';
  font-size: 24px;
  color: #C3CECB;
}

#headerlogo {
  width: 400px;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: slide-in 1s ease-in-out forwards;
}

@keyframes slide-in {
  from {
    top: -100px;
  }
  to {
    top: 20px;
  }
}

.pre1 {
  width: 50%;
  text-align: center;
  align-content: center;
  font-family: 'Open Sans';
  font-size: 24px;
  color: #C3CECB;
  float: left;
}

.pre2 {
  width: 50%;
  text-align: center;
  align-content: center;
  font-family: 'Open Sans';
  font-size: 24px;
  color: #C3CECB;
  float: right;
}

.row {
  display: flex;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.kafelek {
  background-color: #006D57;
  border-radius: 10px;
  text-align: center;
  height: 100px;
  font-family: 'Open Sans';
  font-size: 20px;
  color: #C3CECB;
  margin-top: 50px;
  margin-bottom: 1px;
  margin-right: 10px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kafelek:nth-child(4) {
  margin-right: 100px !important;
}

.kafelek:nth-child(5) {
  margin-left: 100px !important;
}
.kafelek:hover {
  border: 2px solid #7EDF00;
  transition: 0.3s;
  cursor: pointer;
}

.alignkafel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
<div class="header">
  <img src="" img id="headerlogo" />
  <br /> <br /> Centrum zgłoszeniowe AOK
</div>

<div class="pre1"> Delivery Support </div>
<div class="pre2"> Middle Mile</div>



<div class="alignkafel">
  <div class="kafelek">Koszta Dodatkowe</div>
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
  <div class="kafelek">COMING SOON</div>
</div>

Comments:
2023-01-19 00:20:11
This doesnt seem to work - check out the code snippet
2023-01-19 00:20:11
@FrancisPhant0m Thanks, I changed the code now, check again please!
2023-01-19 00:20:11
Looks much better, but the buttons got centered relative to the entire website and I basically want .pre1 and .pre2 to slash the webpage in two parts and center the buttons so that there's 4 of them for each .pre1 (left and right, but centered to .pre)
2023-01-19 00:20:11
@FrancisPhant0m I updated the code, it should work now.
2023-01-19 00:20:11
AWESOME! Any idea how can I make them stack on top of another in rows when browser is resized? I also want this to appear nice on small screen
2023-01-19 00:20:11
@FrancisPhant0m You'll need to use CSS media query to achieve this on different screen sizes. Then depending on the screen size can apply required CSS.

The container for the buttons has a width of 0 which prevents the flexbox from working properly. Adding a width fixes the problem.

.alignkafel1,
.alignkafel2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 60%;
  margin: 0 auto;
}

I have added a width of 60% to align the buttons roughly to the pre above. Currently the pre have float property set. Ideally, you want a parent container to enforce the boundaries of your page content and refrain from using float css property.

Comments:
2023-01-19 00:20:11
All the buttons got stacked in 1 vertical row
2023-01-19 00:20:11
All the buttons are stacked in a single horizontal row. Is that the behavior you are looking for?

i fixed your code, just paste it in your html and css file and everything will work fine. :D

<div class="header">
    <img src="" img id="headerlogo" />
    <br /> <br /> Centrum zgłoszeniowe AOK
  </div>
  
  <div class="pre1"> 
    <p>Delivery Support </p>


    <div class="alignkafel">
        <div class="kafelek">Koszta Dodatkowe</div>
        <div class="kafelek">COMING SOON</div>
        <div class="kafelek">COMING SOON</div>
        <div class="kafelek">COMING SOON</div>
      </div>


  </div>
  <div class="pre2"> 
    </p>Middle Mile</p>


    <div class="alignkafel">
        <div class="kafelek">COMING SOON</div>
        <div class="kafelek">COMING SOON</div>
        <div class="kafelek">COMING SOON</div>
        <div class="kafelek">COMING SOON</div>
      </div>
</div>





    body {
  background-color: #003C3D;
}

.header {
  text-align: center;
  align-content: center;
  padding: 20px;
  font-family: 'Open Sans';
  font-size: 24px;
  color: #C3CECB;
}

#headerlogo {
  width: 400px;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: slide-in 1s ease-in-out forwards;
}

@keyframes slide-in {
  from {
    top: -100px;
  }
  to {
    top: 20px;
  }
}

.pre1 {
  width: 50%;
  text-align: center;
  align-content: center;
  font-family: 'Open Sans';
  font-size: 24px;
  color: #C3CECB;
  float: left;
}

.pre2 {
  width: 50%;
  text-align: center;
  align-content: center;
  font-family: 'Open Sans';
  font-size: 24px;
  color: #C3CECB;
  float: right;
}

.alignkafel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.row {
  display: flex;
}

.kolumna {
  display: inline-block;
  width: 48%;
  font-family: 'Open Sans';
  color: #C3CECB;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.kolumna:first-child {
  margin-right: 0px;
}

.kolumna:last-child {
  margin-left: 0px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 800px) {
  .kolumna {
    width: 100%;
    align-content: center;
  }
}

.kolumna2 {
  display: inline-block;
  width: 48%;
  font-family: 'Open Sans';
  color: #C3CECB;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.kolumna2:first-child {
  margin-right: 0px;
}

.kolumna2:last-child {
  margin-left: 0px;
}

@media screen and (max-width: 800px) {
  .kolumna2 {
    width: 100%;
    align-content: center;
  }
}

.kafelek {
  background-color: #006D57;
  border-radius: 10px;
  text-align: center;
  height: 100px;
  font-family: 'Open Sans';
  font-size: 20px;
  color: #C3CECB;
  margin: 5px;
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 1px;
  margin-left: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 800px) {
  .kafelek {
    display: flex;
    justify-content: center;
  }
}

.kafelek:hover {
  border: 2px solid #7EDF00;
  transition: 0.3s;
  cursor: pointer;
}
Comments:
2023-01-19 00:20:11
WHOAH! Even better than I expected. Thanks a lot, mate!
2023-01-19 00:20:11
No problem mate :)

In alignkafel1&2 set align-items and justify content properties to control the alignment of your buttons which are the flex items.