Question 106204 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Why text before div section will appears AFTER it?

I try to modify single.php in WordPress theme, by adding social buttons before & after the post contents, as below:

          <div class="socialsharebuttons">
            <strong>SHARE NOW:</strong><?php echo do_shortcode('[DISPLAY_ULTIMATE_SOCIAL_ICONS]'); ?>  
          </div>
          <div class="entry">           
            <?php the_content(''); ?>
          </div>
          <div class="socialsharebuttons">
            <strong>SHARE NOW:</strong><?php echo do_shortcode('[DISPLAY_ULTIMATE_SOCIAL_ICONS]'); ?>  
          </div>

In the code, the "SHARE NOW" text appears right before the PHP code that generate the shortcode. However, after displaying the post such as http://www.sybase-recovery.com/blogs/datanumen-archive-repair-3-8-is-released-on-may-16-2021/, I find the "SHARE NOW" shows AFTER the social buttons, as below:

enter image description here

I then use Chrome DevTools to diagnose the issue, and find the codes are:

<div class="socialsharebuttons">
            <strong>SHARE NOW:</strong><div class="sfsi_widget sfsi_shortcode_container">...</div>  
          </div>

The "SHARE NOW" is also before the <div class="sfsi_widget sfsi_shortcode_container">.

I then check the CSS for , and find it has property float: left. So I follow the instructions in https://stackoverflow.com/a/2417150/2704265 and modify CSS as below:

div.socialsharebuttons {
    display: inline-block;
    width: 100%;
    float: left;
}

But that still not working, why?

Tags:

2

Answers


  1. 0

    you want the "share now" in front, or above the social buttons?

    For above it’s:

    .sfsi_shortcode_container {
    float: none;
}

    In Front:

    .sfsi_shortcode_container {
    float: right;
    margin-left:10px;
}
.socialsharebuttons > strong {
    position: relative;
    top: 15px;
}
    Login or Signup to reply.
  2. 0

    This happens because strong is an inline element so it won’t respect the preceding floats. In order to make it side by side just set

    div.socialsharebuttons strong{
    float: left;
    margin-top: 13px;
}

    After setting this it will looking like this
    enter image description here

    If you want the list to go after the text use

    div.socialsharebuttons strong{
        display: block;
        margin-bottom: 13px;
    }

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search