Div Floats Out of Place

Question

I am displaying 3 div columns all floating left. As windows gets resized to smaller, I want it to get down to 1 column. So far, it's doing that, but when one div gets longer than the other, it all gets out of whack on a normal laptop screen. enter image description here

The css is:

.kolumn {
    float: left;
    width: 30%;
    padding: 8px;
}

.feed-lists {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

 .feedlists li {
    border-bottom: 1px solid #eee;
    padding: 9px;
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .kolumn {
        width: 100%;
    }
}

 <div class="kolumn">
<ul class="feed-lists">
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
</ul> </div>

 <div class="kolumn">
<ul class="feed-lists">
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
</ul> </div>
...

Any help would be appreciated to get this floats to align left no matter how long are they... am trying to get them in 3 columns... thanks again!

Hi and welcome to Stack Overflow. `float: left` is considered not to be a best practice (anymore). You should check out `display: flex`. Read more about it at MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox — Roy, Jul 12 '20 at 20:41
Check https://getbootstrap.com. This will help you with the design. — Jakub Muda, Jul 12 '20 at 20:43
@JakubMuda there is no need for a framework for this simple application. BS would be overkill. — disinfor, Jul 12 '20 at 20:44

disinfor · Answer 1 · 2020-07-12T21:03:38.783

I would strongly consider using display: flex for this instead, since float is going the way of the dinosaurs.

To fix what you have, you need to make sure the 1,4,7, etc. element can clear longer elements. Added:

.kolumn:nth-child(3n+1) {
  clear: left;
}

Removed the media query so you can see it in the snippet window.

.kolumn {
  float: left;
  width: 30%;
  padding: 8px;
}

.kolumn:nth-child(3n+1) {
  clear: left;
}

.feed-lists {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.feedlists li {
  border-bottom: 1px solid #eee;
  padding: 9px;
  text-align: center;
}

<div class="kolumn">
  <ul class="feed-lists">
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
  </ul>
</div>

<div class="kolumn">
  <ul class="feed-lists">
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
  </ul>
</div>

<div class="kolumn">
  <ul class="feed-lists">
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
  </ul>
</div>

<div class="kolumn">
  <ul class="feed-lists">
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
  </ul>
</div>

<div class="kolumn">
  <ul class="feed-lists">
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
  </ul>
</div>

<div class="kolumn">
  <ul class="feed-lists">
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
    <li class="feed-item">
      <div class="feed-title"> Title Text Goes here </div>
    </li>
  </ul>
</div>

Here's a `flex` example:

* {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
}

.kolumn {
  padding: 8px;
  flex: 1 0 33.3333%;
}


.feed-lists {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.feedlists li {
  border-bottom: 1px solid #eee;
  padding: 9px;
  text-align: center;
}

@media only screen and (max-width: 600px) {
    .kolumn {
        flex: 0 0 100%;
    }
}

<div class="wrap">
  <div class="kolumn">
    <ul class="feed-lists">
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
    </ul>
  </div>

  <div class="kolumn">
    <ul class="feed-lists">
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
    </ul>
  </div>

  <div class="kolumn">
    <ul class="feed-lists">
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
    </ul>
  </div>

  <div class="kolumn">
    <ul class="feed-lists">
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
    </ul>
  </div>

  <div class="kolumn">
    <ul class="feed-lists">
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
    </ul>
  </div>

  <div class="kolumn">
    <ul class="feed-lists">
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
      <li class="feed-item">
        <div class="feed-title"> Title Text Goes here </div>
      </li>
    </ul>
  </div>
</div>

Here I added a wrap element with display: flex and flex-wrap: wrap to make sure elements wrap:

Then, each .kolumn gets a flex: 1 0 33.3333% property - which is shorthand for flex-grow: 1, flex-shrink: 0, flex-basis: 33.333% - flex-basis is essentially the flex equivalent to width.

Some really good reading on flex:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thanks a lot, I tried the first example with kolumn.nth-child ... but it didn't quite work... see the link to the screenshot... https://i.ibb.co/Y03D8g9/screenshot.png Also removing the media css section would not bring the 3 columns to one when viewed on smaller screen (phone)... Let me try with 'wrap' — JM Student, Jul 12 '20 at 20:55
@JMStudent I only removed the media query so you could see it in the snippet window - you will still need it in your environment. — disinfor, Jul 12 '20 at 20:59
The screenshot doesn't really help, since the snippet I made works. Do you have other code you can share? What are your `.kolumns` wrapped in? Are there other elements in the wrapper? Need more information. — disinfor, Jul 12 '20 at 21:01
Awesome! Glad you got it to work. If you want, you can accept this answer if it helped. — disinfor, Jul 12 '20 at 21:07
The flex I used doesn't work on my iPhone, all three columns show... but when I resize the laptop browser, it works perfectly... There are no other elements used in the code, within the div wrap, i have all div columns. — JM Student, Jul 13 '20 at 08:35
What orientation do you have your iPhone? I've tested it and it works as expected — disinfor, Jul 13 '20 at 14:13

Div Floats Out of Place

1 Answers1

Here's a flex example:

Here's a `flex` example: