# Different width for columns in a dnd-template

**URL:** <https://community.hubspot.com/t/different-width-for-columns-in-a-dnd-template/24916>\
**Category:** CMS Development\
**Tags:** design-manager\
**Created:** [September 2, 2020, 11:30am UTC](https://community.hubspot.com/t/different-width-for-columns-in-a-dnd-template/24916 "2020-09-02T11:30:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ewice](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ewice/32/31639_2.png) [@ewice](https://community.hubspot.com/u/ewice)\
**Post date:** [September 2, 2020, 11:30am UTC](https://community.hubspot.com/t/different-width-for-columns-in-a-dnd-template/24916/1 "2020-09-02T11:30:31Z")

</div>

Good afternoon,  
when creating a dnd-template in the design manager a width attribute can be given to the element. But if I want to position two modules next to each other with different widths, this does not work. Each element takes up exactly half of the available space. Where is my mistake?

```lia-code-sample
{% dnd_area 'dnd_area' class='body-container body-container--landing-page', label='Main' %}
 {% dnd_section 
 max_width=1506,
 vertical_alignment='MIDDLE'
 %}
 {% dnd_column
 offset=0,
 width=4
 %}
 {% dnd_row %}
 {% dnd_module path='@hubspot/linked_image' %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% dnd_row %}
 {% dnd_module path='@hubspot/rich_text' %}
 {% module_attribute 'html' %}
 <h3>Feature one</h3>
 <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% dnd_column
 offset=4,
 width=8
 %}
 {% dnd_row %}
 {% dnd_module path='@hubspot/linked_image' %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% dnd_row %}
 {% dnd_module path='@hubspot/rich_text' %}
 {% module_attribute 'html' %}
 <h3>Feature two</h3>
 <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% end_dnd_section %}
 {% end_dnd_area %}

```

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [September 2, 2020, 12:44pm UTC](https://community.hubspot.com/t/different-width-for-columns-in-a-dnd-template/24916/2 "2020-09-02T12:44:29Z")

</div>

@ewice your HubL looks correct from my first glance. It could be an issue with your CSS that’s being used for your layout.css / row-fluid span1-12 classes. Do you have a preview link?

---

<div class="post-metadata">

**Author:** ![ewice](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ewice/32/31639_2.png) [@ewice](https://community.hubspot.com/u/ewice)\
**Post date:** [September 17, 2020, 7:53am UTC](https://community.hubspot.com/t/different-width-for-columns-in-a-dnd-template/24916/3 "2020-09-17T07:53:01Z")

</div>

I forgot to link the layout.css.

Thanks