CODEWITHSUNDEEP
htmlcsswordpress
alancc
alancc

Reputation: 811

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?

Upvotes: 0

Views: 83

Answers (2)

Viira
Viira

Reputation: 3911

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

Upvotes: 2

st&#39;sahib
st&#39;sahib

Reputation: 183

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;
}

Upvotes: 1

Related Questions