# floating custom modules with height auto

**URL:** <https://community.hubspot.com/t/floating-custom-modules-with-height-auto/10839>\
**Category:** CMS Development\
**Created:** [November 6, 2018, 4:15pm UTC](https://community.hubspot.com/t/floating-custom-modules-with-height-auto/10839 "2018-11-06T16:15:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matt1986](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt1986/32/48165_2.png) [@Matt1986](https://community.hubspot.com/u/Matt1986)\
**Post date:** [November 6, 2018, 4:15pm UTC](https://community.hubspot.com/t/floating-custom-modules-with-height-auto/10839/1 "2018-11-06T16:15:44Z")

</div>

Hi

I have created a custom module to add staff photos on our website. I have used float left and given a width of 50%, allowing me to add extra staff photos easily in the future.

My issue is that i would ideally like the height of the module to be auto, so allowing for different staff description lengths below the image. However when i do this not all the custom modules always float to the left as the custom module above is blocking it.

This there a way around this issue?

I have provided a link to the page below

[http://www-eurobase-com.sandbox.hs-sites.com/management-team-group?hs\_preview=MZtTJJXZ-6028176292](http://www-eurobase-com.sandbox.hs-sites.com/management-team-group?hs_preview=MZtTJJXZ-6028176292)

Thanks, i really appreciate any help!

Matt

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 6, 2018, 9:45pm UTC](https://community.hubspot.com/t/floating-custom-modules-with-height-auto/10839/2 "2018-11-06T21:45:46Z")

</div>

hi @Matt1986,

I would consider creating a new custom module and take advantage of the repeater functionality. you wouldnt need that jquery script and you wouldnt have that repeated css in your document.

the float is performing how it is intended to perform. you will need a height to make it do what you want with a float. I would recommend a flex container. I wrote it out for you [here](https://codepen.io/billyoncetoldme/pen/gQaRvy)

[here](https://designers.hubspot.com/blog/repeating-fields-in-the-new-module-framework) is a read on the repeater functionality

good luck out there,

d

---

<div class="post-metadata">

**Author:** ![Matt1986](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt1986/32/48165_2.png) [@Matt1986](https://community.hubspot.com/u/Matt1986)\
**Post date:** [November 8, 2018, 7:50pm UTC](https://community.hubspot.com/t/floating-custom-modules-with-height-auto/10839/3 "2018-11-08T19:50:39Z")

</div>

Thank you! I really appreciate your help on this.

For the time being i have just created a new custom module with display, inline-flex.

however i will look into the reapter functionality i wasn’t even aware of this

thanks again!

Matt

---

<div class="post-metadata">

**Author:** ![Matt1986](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt1986/32/48165_2.png) [@Matt1986](https://community.hubspot.com/u/Matt1986)\
**Post date:** [November 10, 2018, 4:33pm UTC](https://community.hubspot.com/t/floating-custom-modules-with-height-auto/10839/4 "2018-11-10T16:33:02Z")

</div>

Hi

Thanks for your reply. I have now begun use the repeater functionality. howveer i’m struggleing to get the repeating object to fit side by side without the float: left and a fixed height. How can i make that when i add another repeater item, that it is added to the side rather than below.

i have provided a link to the page. the first 3 staff photos are the new repeater elements.

[http://www-eurobase-com.sandbox.hs-sites.com/management-team-group?hs\_preview=MZtTJJXZ-6028176292](http://www-eurobase-com.sandbox.hs-sites.com/management-team-group?hs_preview=MZtTJJXZ-6028176292)

thank you!!

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 11, 2018, 12:45am UTC](https://community.hubspot.com/t/floating-custom-modules-with-height-auto/10839/5 "2018-11-11T00:45:58Z")

</div>

Hi @Matt1986,

a few things that you should do to make this sing

1) to member-repeater-super-wrapper, apply flex-wrap. if you dont have this, they are going to continue to stay on the same row.

2) the width of member-repeater-wrapper should be 50% (if you want two per line) or 33% (if you want 3 per line) etc

3) for older browser compatibility, make sure to add vendor prefixes. I often paste my code into [here](https://autoprefixer.github.io/) for autoprefixing