css help- positioning issue w board index

[eskie]

i've been playing with the stylesheets in the default smf curve 2 theme, and i've altered the board index so theres two columns rather than one. however, the cat bar seems to want to keep an awkward position behind the boards. i'm struggling to understand where/what the issue could be thats causing it to stick.

image ref attached. heres the coding of the board index section as well for reference.

Code Select Expand

/* BoardIndex */
/* This place covers board places (boardindex/messageindex/recent) */
.boardindex_table:not(:last-child) {
   margin-right: 0.5%;
   margin-bottom: 0.5%;
   display: inline;
   font-family: arial;
}
h3 .collapse {
   float: right;
   margin: 4px 4px 0 0;
}
.board_icon a {
   background: url(../images/boardicons.png) no-repeat 0 0 / 90px;
   display: inline-block;
   width: 45px;
   height: 45px;
}
.board_icon a.board_on2 {
   background-position: -45px 0;
}
.board_icon a.board_off {
   background-position: 0 -45px;
}
.board_icon a.board_redirect {
   background-position: -45px -45px;
}
.board_icon {
   text-align: center;
   padding: 8px 0 0 0;
   width: 60px;
   flex-shrink: 0;
}
.boardindex_table .board_icon {
   width: 80px;
}
.boardindex_table .info {
   width: calc(55% - 80px);
}
.boardindex_table .board_stats {
   padding: 13px 10px 10px;
}
.boardindex_table .board_stats p {
   border-left: 1px solid #989D98;
   border-right: 1px solid #989D98;
}
.info {
   overflow: hidden;
   overflow-wrap: break-word;
   padding: 5px 5px 5px 0;
}
.info .subject {
   font-weight: 600;
   font-size: 1.3em;
   color: #b6bfad;
   text-transform: lowercase;
   font-family: georgia;
   font-style: italic;
}
.board_stats {
   width: 15%;
   font-size: 0.9em;
   margin: 0 0 0 auto;
   text-align: center;
   text-transform: lowercase;
}
.lastpost {
   width: 30%;
   font-size: 0.9em;
   padding-top: 3px;
   text-transform: lowercase;
   font-style: italic;
}
.board_icon, .info, .board_stats, .lastpost {
   display: inline-block;
   align-self: center;
   text-transform: lowercase;
}
.main_container {
   margin-bottom: 100px;
}
.up_contain {
   overflow: hidden;
   border: 1px solid #989D98;
   margin: 0 0 3px 0;
   display: flex;
   flex-wrap: wrap;
   width: 49.5%;
   float: left;
}

[Diego Andrés]

It's the float, likely.
Try with grid or flex.

Code Select Expand

#boardindex_table .main_container > div:not(.cat_bar) {
  display: flex;
  column-gap: 3px;
  flex-wrap: wrap;
}
#boardindex_table .up_contain {
  flex-basis: calc(50% - 3px);
  flex-grow: 1;
}


[eskie]

oh perfect! this fixed it completely. thank you!!