Shortcode and Theme

Question

In my post, I am using a shortcode [slickr-flickr tag="MyAlbum"] to grab images from flickr. This shortcode is available for my wordpress via Slickr Flickr plugin.

When I put this shortcode in my post, it simply generates a gallery and output it according to the place of shortcode usage along other content in the post.

I want to place output of this shortcode (gallery) in the specific area of the post. How can I do that?

To get a better idea of slideshow place, please check the attached image.

EDIT: Selected code from page.php and style.css is as under:

page.php code

<div class="entry-content">
        <h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php echo esc_attr( sprintf( __( 'Permanent link to %s', 'chaostheory' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title() ?></a></h2>
    <?php the_content() ?>
    <?php link_pages('<div class="page-link">'.__('Pages: ', 'chaostheory'), '</div>', 'number'); ?>
    <?php edit_post_link(__('Edit this entry.', 'chaostheory'),'<p class="edit-link">','</p>') ?>
</div><!-- .entry-content -->

style.css:

.page-2cols .entry-content {width:100%;}
.page-2cols .entry-title {text-align:center;}
.page-2cols .slickr-flickr-slideshow {width:330px !important; float: left !important;}

Answer 1

Ray is right - either wrap the shortcode in a div that you then style by setting a width (and float:left), or else add this to your css:

.slickr-flickr-slideshow {
    width: 300px; /* use your desired width */
    float: left;
}

You may have to tweak the css given your specific install, but this would get you started.

NOTE: this style will occur AFTER the slickr flickr stylesheet styles in order to properly override them, or else you'll need to use the !important operator:

.slickr-flickr-slideshow {
    width: 300px !important; /* use your desired width */
    float: left !important;
}