Mastering CSS Positioning in AddThis

Currently, I have utilized a Table for formatting the AddThis Div Buttons on my website. You can view this at:

The top of the page displays correctly as follows:

Below is the workaround code for achieving this:

<table align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="60%" align="right"><img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23" /></td>
    <td width="40%" align="left"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=siding4u"></script>
<!-- AddThis Button END --></td>
  </tr>
</table>

I am looking to transition all my table layouts to CSS but facing challenges in getting the AddThis buttons to work properly. They always appear left-justified or break somehow regardless of what I attempt.

This seems like an easy fix, but my CSS skills are lacking in this area. Any assistance would be greatly appreciated.

Please help...

htmlcsshtml-tableaddthis

Answer №1

When it comes to CSS, aligning images is done based on their position on the page rather than justification. While in a table you justify left/center/right, with CSS the goal is to align the image so that its child elements are centered.

HTML: 

<div id='wrapper'> <!-- parent div containing help-us-help-you image and buttons-->
    <div id="help_us"><!-- float:left because we want the image div and button dive to be beside each other -->
        <img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23"/>
    </div>
    <div id='buttons'><!-- this div should also be floated left and have padding to align the buttons correctly -->

        <!-- each link element should get some padding -->
        <a class="addthis_button_preferred_1 button_preferred"></a>
        <a class="addthis_button_preferred_2 button_preferred"></a>
        <a class="addthis_button_preferred_3 button_preferred"></a>
        <a class="addthis_button_preferred_4 button_preferred"></a>
        <a class="addthis_button_compact button_preferred"></a>
        <a class="addthis_counter addthis_bubble_style button_preferred"></a>
    </div>
</div>

The complete example can be found online on this fiddle, offering assistance with alignment without tables using only CSS!

p.s. Using JSFiddle for CSS/HTML/javascript issues is recommended as it helps visualize problems better and allows for quicker changes.

EDIT For the second issue: 

<div align="center" style="margin-bottom:0; margin-top:5px;"> 
<div id='wrapper'> 
...
​</div>
...
</div>

In this element, the height for some reason is 48px, creating a gap between the two elements. To fix this, apply a height by changing:

style="margin-bottom:0; margin-top:5px;"

TO:

style="margin-bottom:0; margin-top:5px;height:23px;"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can we display just 2 pricing tables instead of 4 and align them in the center?

Apologies for my lack of experience, I am relatively new to this field! I have encountered the following problem: I currently have 4 pricing tables available: 4 pricing tables However, when I attempt to remove 2 pricing tables in order to keep only 2 i ...

htmlcssbootstrap-4web-inspector

The horizontal scroll feature is dysfunctional when attempting to allocate cell space based on a percentage

I want to display two sections of text that take up the full width of the screen and resize automatically when the screen size changes. Currently, I am using percentage widths to achieve this. However, when the text inside a section exceeds the available ...

htmlcsshorizontal-scrolling

Is there a way to eliminate the menuArrow from a Select widget in gwt-bootstrap3?

In my current project, using gwt-bootstrap3, I have been attempting to conditionally remove the menu arrow from a Select box. I have experimented with various methods such as: <select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showM ...

cssgwtgwtbootstrap3

The tab content in VerticalTab Material React UI is spilling out and overflowing

Having some trouble with this particular component. Whenever I input content larger than my Grid size, it overflows the VerticalTab section. You can see an example of this in this codesandbox. Here's what I've attempted: return ( <div cla ...

htmlcssmaterial-ui

Display an asterisk or bullet point in text fields and labels to indicate that the user does not have permission to view

In my current project, I have a specific requirement that involves displaying an asterisk or bullet dot for fields which the user does not have view access to. My goal is to keep the labels visible but show them as read-only with the asterisk data. Furthe ...

javascriptjqueryhtml

Non-sticky hamburger menu is not fixed in place

Having trouble with the hamburger menu staying sticky? The hamburger icon remains in the corner as you scroll down, but the menu stays fixed at the top of the page, making it hard to access. You tried tweaking the code you found on Codepen, but couldn&apos ...

javascripthtmlcss

Is your toggleclass button suffering from technical difficulties?

Why am I having trouble toggling the box with the button? I want it to maintain its current functionality and also toggle the box as well. Check out my JS fiddle for reference. Here's my code snippet: $(function timelinetiles() { $('.timeline ...

javascriptjqueryhtmltoggletoggleclass

I am having trouble getting bootstrap-icons to work in my Angular project and I'm eager to figure it out

I am having trouble incorporating bootstrap-icons into my angular project. Despite running the npm i bootstrap-icons command, I am unable to successfully add icons using icon fonts on my webpage. As a temporary solution, I have added the bootstrap icon CD ...

htmlcssangularbootstrap-5bootstrap-icons

Ways to make a webpage automatically adjust its layout using pixels and incorporating rems

Using rem units allows for easy control of full page size to make it responsive. For example: div{ font-size:20rem; } @media only screen and (max-width: 576px) { html{ font-size:20%; } } But what can we do when using px units instead ...

javascripthtmlcssresponsive-designresponsive

The scrollbar track has a habit of popping up unexpectedly

Is there a way to prevent the white area from showing up in my divs where the scroll bar thumb appears? The issue seems to occur randomly on Chrome and Safari. https://i.sstatic.net/jFzTf.png This is the div in question .column-content{ height:60vh; ...

htmlcssangularscrollscrollbar

Using PHP with Slim PHP Framework to dynamically include CSS files in the header of a document

I have developed a sleek application featuring a login form, dashboard, registration page, and account page. Each of these pages has its own unique route. To maintain consistency across all pages, I have included a shared header and footer by inserting < ...

phphtmlcssdynamicslim

Tips for implementing Undefined validations with Lodash

When receiving nested objects in the response, we must traverse to the property and display the values in the user interface. If we have a nested object like this: obj = { parent: { innerchild1: { innerchild2:{ displayText: ...

javascripthtmljqueryjsonreactjs

PHP Administrator Access

When a user logs in as an admin on my website, I want certain options to be available. My concern is ensuring the security of this admin account. Currently, after the login process is authenticated, I set $_SESSION['status'] = 'authorized&ap ...

phpjqueryhtmlauthenticationuser-accounts

Create a circular modal for the design

I am interested in creating a modal that has a circular shape instead of the typical rectangle with rounded corners. This means it should appear as just a simple round container with the modal-body content in the center, without any modal-header or modal-f ...

javascripthtmlcsstwitter-bootstrapbootstrap-modal

Use jQuery to assign a fresh class to the navigation panel

I'm currently making changes to a WordPress site locally. I'm utilizing jquery.dropotron from ajlkn for the menu, which is working well. However, I'm facing an issue when trying to assign a new class to the 7th child of the navPanel. Somethi ...

jquerycss

Trouble with CSS display in Internet Explorer 8

My website located at this link is working perfectly in IE 10 and IE 11, however, any version lower than that is causing the content to be displayed on the far left of the screen instead of centering it. I have tried tweaking the CSS but can't seem to ...

cssinternet-explorer-8

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

One of the goals for my app is to have multiple themes, including Angular Material themes, with the ability to define custom colors for specific components and elements that are not part of Angular Material. It's important that when I change a theme, ...

cssangularsassangular-material

Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...

javascriptjqueryhtmlcssimage

The lack of responsiveness in Bulma CSS is causing issues with the Bulma Carousel and image displays

I recently built a website using the Bulma CSS framework for styling, incorporating the Bulma Carousel for a text carousel. Utilizing Bulma's column feature, I positioned the carousel next to an image/video on the left side of the screen. Everything l ...

htmlcssflexboxmobile-websitebulma

What is the process for switching between Material Cards produced by a single component?

I need help with swapping material cards using button clicks. Can anyone guide me on how to achieve this? Below is a snippet of code and some screenshots: miner-view.component.html: This component should contain a total of 10 cards <button mat-raised ...

htmlangulartypescriptangular-material