I'm trying to figure out how can I make a part of my columns the same height as the other parts in the column. An image to clarify:
Left from the data I also have another column. Full page is like this:
My html looks like this:
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="contacts">
<h2>Business Contacts</h2>
<div class="infomation">
<div class="col-md-6">
<h3>Industry</h3>
<div class="name">Joris<br> <span>Vuerstaek</span></div>
<div class="mail"><a href="mailto:[email protected]">[email protected]</a></div>
</div>
<div class="col-md-6">
<h3>Public Space</h3>
<div class="name">Wouter<br> <span>Verhaegen</span></div>
<div class="mail"><a href="mailto:[email protected]">[email protected]</a></div>
</div>
<div class="col-md-6">
<h3>Buildings</h3>
<div class="name">Dirk<br> <span>Slabbinck</span></div>
<div class="mail"><a href="mailto:[email protected]">[email protected]</a></div>
</div>
<div class="col-md-6">
<h3>Healthcare</h3>
<div class="name">Kenneth<br> <span>Groosman</span></div>
<div class="mail"><a href="mailto:[email protected]">[email protected]</a></div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<div class="addresses">
<h2>Belgium</h2>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Itech Incubator 2<br>
rue Auguste Piccard 48<br>
B - 6041 Charleroi
</div>
<div class="numbers">
<span>T</span> +32 71 15 91 30<br>
<span>E</span> <a href="mailto:[email protected]">[email protected]</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Brugsesteenweg 210<br>
B - 8800 Roeselare
</div>
<div class="numbers">
<span>T</span> +32 51 26 20 20<br> <span>F</span> +32 51 26 20 21<br>
<span>E</span> <a href="mailto:[email protected]">[email protected]</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Europa Building<br>
Avenue Clemenceau 87<br>
B - 1070 Brussels
</div>
<div class="numbers">
<span>T</span> +32 2 414 07 77<br>
<span>F</span> +32 2 414 04 98<br>
<span>E</span> <a href="mailto:[email protected]">[email protected]</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Axxes Business Park<br>
Guldensporenpark<br>
Building A - n° 4<br>
B - 9820 Merelbeke
</div>
<div class="numbers">
<span>T</span> +32 9 210 31 50<br>
<span>F</span> +32 9 210 31 59<br>
<span>E</span>
<a href="mailto:[email protected]">[email protected]</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
</div>
<div class="addresses">
<h2>Vietnam</h2>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Pullman Hanoi, C21, Level 5<br>
40 Cat Linh, Dong Da District<br>
Hanoi
</div>
<div class="numbers">
<span>T</span> +84 4 3736 9097<br> <span>E</span> <a href="mailto:[email protected]">[email protected]</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Harbour View Tower, Level 13<br>
35 Nguyen Hue, District 1<br>
Ho Chi Minh City
</div>
<div class="numbers">
<span>T</span> +84 8 3512 2051<br>
<span>E</span>
<a href="mailto:[email protected]">[email protected]</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I've done is give my div with class address a fixed height of 104px. But the problem is in the second part where the address is longer than 104px. How can I fix this easily?
Nielsv, Hi there. Have a look at this Fiddle.
Does this help with what you are doing here.
I gave both address and numbers classes a set height. Also used row to help with the layout here too.
Your Vietnam title gave you a little issue in the stack, so I put each country within their own rows.
I resized the Belgium layout so they are two side by side. As it has it's own row.
I have just added the border top/bottom lines to help to get a better view here while laying this out. You can remove them.
When this is resized it looks ok, but you may want to tweek this.
With the content you have here I would probably add another smaller media breakpoint at 320px and set each to full width. Remember Bootstrap helps but generally adding some custom css like this helps too.
Hope this can get you on track here.