Trying to create a grid/column shortcode

CMS & WordPress
1

I have been going back and forth, doing a lot of trial and error. What i want to output is a grid/column shortcodes.

For example [column_one]Lorem Ipsum[/column_one]

so far this is what i have came up

/*Grid Shortcode*/
function grid_one($content = null) {
    return '<div class="one columns">'.$content.'</div>';
}

add_shortcode('column_one', 'grid_one' );

when try to apply the opening and closing shortcode. My text seems to disappear. I’m using skeleton framework and my CSS for that stylesheet is located in this folder called “CSS”.

CSS/Skeleton.css

When i tried to create a clearfix shortcode. It seems to be working fine with no problems and it clears the floated elements. Here is the code.

//Clear Shortcode
function clear_fix($content = null) {
    return '<div class="clearfix"></div>';
}

add_shortcode ('clear', 'clear_fix');
2

Ok so i managed to solve my shortcode. Now i have another problem. The grid worked but the first paragraph doesn’t have any styling but the 2nd and 3rd have styling http://i255.photobucket.com/albums/hh140/testament1234/font_zps75ea6335.png

3

Should you take a look into any parts. From my idea, you maybe lost end tag on the first graph.

4

I just the view source in my website and it seems it’s missing a opening <p> tag in the first paragraph and a closing </p> tag in the second when i apply a shortcode. Really frustrating not sure how i can solve this. Styling is fine when i don’t apply any shortcode

<div class="page-format">       
       <div id="responsive-image-container" class="sixteen columns responsive-image-container"><div class="responsive-image"><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lacinia blandit. Nam sodales eu metus a viverra. Aenean ac suscipit odio. Nullam ac dignissim neque, sed fringilla felis! Etiam egestas tellus sed posuere ultricies</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lacinia blandit. Nam sodales eu metus a viverra. Aenean ac suscipit odio. Nullam ac dignissim neque, sed fringilla felis! Etiam egestas tellus sed posuere ultricies<br />
</div></div>

<div class="clearfix"></div>