Problems with shortcodes

[chantal2012]

I have a problem with shortcodes...I am using Genesis shortcodes to create a two column layout. I can't include link because site is in maintenance mode. So when I use the shortcodes, I put content in the first half and content in the second half...however even though the shortcode closing tag is there after the content, the footer from the bottom goes out of whack and tries to align with the text. If I add a </div> tag, then it fixes but there are no opening div tag. This is the code that I'm using:

<section class="l-constrained">
<div class="l-row">
<div class="l-half">
[one_half_first]
test text
[/one_half_first]
</div>

<div class="l-half">

[one_half]&lt;figure class=&quot;flex-image&quot;&gt;<img alt="&quot;&quot;" src="//fasterpregnancy.com/wp-content/themes/agency-pro/images/intro.png&quot;" />

&lt;/figure&gt;[/one_half]

&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

&lt;div class=&quot;tilted-line&quot;&gt;
&lt;div class=&quot;tilted-line-inner tilted-right&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;section class=&quot;l-constrained&quot;&gt;
&lt;div class=&quot;l-row&quot;&gt;
&lt;div class=&quot;l-half&quot;&gt;
[one_half_first]
test text
[/one_half_first]
&lt;/div&gt;

&lt;div class=&quot;l-half&quot;&gt;

[one_half]&lt;figure class=&quot;flex-image&quot;&gt;<img alt="&quot;&quot;" src="//fasterpregnancy.com/wp-content/themes/agency-pro/images/intro.png&quot;" />

&lt;/figure&gt;[/one_half]

&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

&lt;div class=&quot;tilted-line&quot;&gt;
&lt;div class=&quot;tilted-line-inner tilted-left&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;section class=&quot;l-constrained&quot;&gt;
&lt;div class=&quot;l-row&quot;&gt;
&lt;div class=&quot;l-half&quot;&gt;
[one_half_first]
test text
[/one_half_first]
&lt;/div&gt;

&lt;div class=&quot;l-half&quot;&gt;

[one_half]&lt;figure class=&quot;flex-image&quot;&gt;<img alt="&quot;&quot;" src="//fasterpregnancy.com/wp-content/themes/agency-pro/images/intro.png&quot;" />

&lt;/figure&gt;[/one_half]

&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

&lt;div class=&quot;tilted-line&quot;&gt;
&lt;div class=&quot;tilted-line-inner tilted-right&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;section class=&quot;l-constrained&quot;&gt;
&lt;div class=&quot;l-row&quot;&gt;
&lt;div class=&quot;l-half&quot;&gt;
[one_half_first]
test text
[/one_half_first]
&lt;/div&gt;

&lt;div class=&quot;l-half&quot;&gt;

[one_half]&lt;figure class=&quot;flex-image&quot;&gt;<img alt="&quot;&quot;" src="//fasterpregnancy.com/wp-content/themes/agency-pro/images/intro.png&quot;" />

&lt;/figure&gt;[/one_half]

&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

&lt;div class=&quot;tilted-line&quot;&gt;
&lt;div class=&quot;tilted-line-inner tilted-left&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

[chantal2012]

The client wants the same look at this site: http://www.studiocalico.com/

They want the left tilted lines and right tilted lines....I'm just wondering if there is any way to achieve this without using shortcodes to create a column for text and a column for image...I know how to get the tilted lines in there.

[aldash]

If I'm reading this right...

Try adding this:

<div style="Clear:both;">

[Author]

Posts