CODEWITHSUNDEEP
htmlcss
Ned
Ned

Reputation: 1207

Putting items next to each other without any space

I'm trying to create a country list with 3 columns. What I did so far is that:

enter image description here

HTML:

<div class="flagList">
<div class="flagColumn"> </div>
<div class="flagColumn"> </div>
<div class="flagColumn"> </div>
...
</div>

CSS:

.flagList {
    margin-bottom:20px;
    width: 100%;
    float: left;
    font-family: Calibri, Verdana;
    font-size:14px;
    line-height:13px;
    border:1px solid;
}

.flagColumn {
    width: 33%;
    float: left;
    border:1px solid;
}

I don't want to leave any space between rows such as the space between Comoros and Cote d'lvoire. What I want to do is: enter image description here

How should I change my code?

Upvotes: 1

Views: 254

Answers (3)

Kodithic
Kodithic

Reputation: 170

You may consider looking into the overflow CSS property if you don't mind the end of the country name being hidden. With this, your CSS would become something like:

.flagColumn {
    width: 33%;
    float: left;
    border:1px solid;
    height:1em;
    overflow:hidden;
}

This allows you to get rid of the spaces while still having them appear in alphabetical order in your code. I think this will also scale better across screen/window sizes.

There are ways to have the "hidden" content show when the user mouses over the box. Here's one example, but you can find others that might fit your goals better.

Upvotes: 1

Norberto Hdez
Norberto Hdez

Reputation: 54

box sizing: border-box;

border-sizing: border-box; is your friend. Look at my jsfiddle:

http://jsfiddle.net/wr1zL2ax/3/

Upvotes: 1

austinthedeveloper
austinthedeveloper

Reputation: 2601

This is the downside of floating. When there are different heights, divs will start getting stuck on the edges of the bigger ones. There are 3 ways to fix this:

  • Use a jQuery plugin that equalizes all heights like what Foundation does.
  • Give .flagColumn a min-height that is bigger than the biggest one. This will make their heights all equal but might give more space than you'd like.
  • Switch these from a div grid to a table grid. Tables have their place and this situation might be right for it. Avoid this suggestion if the grid changes widths. Use this if .flagColumn is always 33%.

If it were up to me, I would use the 1st or 2nd option. Table properties can be changed to work with media queries too if that is needed.

Upvotes: 2

Related Questions