0

I am making a contact list but have some problem with the text length and height of the containers. I want that all .image-container div always should be on the same row (4 per row) if the content above is to long. In the snippet try to press the button and 2 boxes should be higher up then the others, I want all boxes to be where the first 2 boxes are.

 $('.add').click(function() {
  $('.addhere').text('This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs');
});
.contact-holder{
    height: 500px;
    width: 605px;
}
.image-container {
    width: 139px;
    float: left;
    min-height: 195px;
    margin: 0em 1%;
    font-size: 15px;
}

.image-container img {
    width: 135px;
    height: 135px;
}

.user-name {
    margin: 0px 0 1px 0;
    word-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #464646;
    font-weight: bold;
}

.user-title {
    font-size: 0.8em;
    margin: 0px 0 1px 0;
    word-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    color: #464646;
}
.user-mail {
    color: #00536E;
    font-size: 9px;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 0 1em 0;
    font-size: 1.2em;
    color: #464646;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-holder col-sm-10 col-sm-offset-1">
<button class="add">Add text</button>
        <h2>Departement</h2>
        
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>         
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title addhere">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>  
        
    </div>
pat
  • 103
  • 1
  • 14

2 Answers2

1

Wrap your image containers with a flexbox div. 

$('.add').click(function() {
  $('.addhere').text('This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs This is a long text that messes up my divs');
});
.contact-holder{
    height: 500px;
    width: 605px;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.image-container {
    width: 139px;
    float: left;
    min-height: 195px;
    margin: 0em 1%;
    font-size: 15px;
}

.image-container img {
    width: 135px;
    height: 135px;
}

.user-name {
    margin: 0px 0 1px 0;
    word-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #464646;
    font-weight: bold;
}

.user-title {
    font-size: 0.8em;
    margin: 0px 0 1px 0;
    word-wrap: break-word;
    font-family: Arial, Helvetica, sans-serif;
    color: #464646;
}
.user-mail {
    color: #00536E;
    font-size: 9px;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 0 1em 0;
    font-size: 1.2em;
    color: #464646;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-holder col-sm-10 col-sm-offset-1">
<button class="add">Add text</button>
        <h2>Departement</h2>

            <div class="wrapper">
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>         
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title addhere">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>  
            </div>
    </div>
Ozturk Can Gokkaya
  • 315
  • 1
  • 2
  • 8
1

you should use Clearfix. I added a div parent with a class clearfix on the 1st 4 row

for you to understand more about clearfix try to read this reference: What is a clearfix?

here is the sample working link of jsfiddle: https://jsfiddle.net/03zjx24e/

add this to your CSS

CSS:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

HTML:

                <!--Newly added clearfix-->
        <div class="clearfix">
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>         
                <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title addhere">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>                  <div class="image-container">
                    <img src="https://cdn.lincraft.com.au/media/catalog/product/cache/1/thumbnail/135x/9df78eab33525d08d6e5fb8d27136e95/2/2/22482617.jpg">
                    <p class="user-name">Name LastName</p>
                    <p class="user-title">Title</p>
                    <a class="user-mail" href="mailto:Mail@Mail.com">Mail@Mail.com</a>
                </div>            

                                </div><!--closing of clearfix-->

I hope this helps you, Happy Coding!

セアンデエ
  • 214
  • 2
  • 11