WordPress footer widgets appearing misaligned

I have made a child theme for Twenty Thirteen and am in the process of making some updates to it. My development site is essentially a replica of the live site. The only modification I made in the footer section was to change the widget title styles, but I'm having trouble getting the 3 widgets to align properly. Currently, I have 2 on the top line and 1 below. Changing the container width doesn't seem to solve the issue.

Here is the updated version of the site:

And here is the old site that still functions correctly:

Can anyone pinpoint what might be causing this problem?

CSS (relevant styles for the footer)

/* FOOTER */
.site-footer .sidebar-container, .site-footer { 
    background-color: #fff;
}

.site-footer .sidebar-container {
    min-height: 335px;
    padding: 20px 0 0;
    border-top: 0 solid #0069AA;
}

.site-footer .widget{
    width: 100% !important;
    max-width: 333px !important;
    border-bottom: 5px solid #0069AA;
    background-color: #fff;
    min-height: 358px;
    float:left;
    font-size: 14px;
    margin: 0 0 24px;
    padding: 0 0 10px 0;
    word-wrap: break-word;
    color: #333;
}


.widget .widget-title {
    font: normal 24px Arial, Helvetica, sans-serif;
    margin: 0;
}

.site-footer .widget-title, .site-footer .widget-title a, .site-footer .wp-caption-text {
    font: normal 24px 'Open Sans', Arial, Helvetica, sans-serif;
    color: #000;
    background-color: transparent;
    margin: 0;
    padding: 5px 0;
    border-bottom:2px solid #FDFDFD;
    word-spacing:0;
    text-transform: capitalize;
}

.site-footer .widget-title span{
    color: #000;
    font-weight:normal;
}
.site-footer .widget li {
    padding:0 0 10px;
}

HTML

<footer role="contentinfo" class="site-footer" id="colophon">
                <div role="complementary" class="sidebar-container" id="secondary">
        <div class="widget-area masonry" style="position: relative; height: 399px;">
            <aside class="widget widget_flexible-recent-posts-widget masonry-brick" id="flexible-recent-posts-widget-3" style="position: absolute; left: 0px; top: 0px;"><div class="frp-widget-wrapper frp-widget-">
        <div class="frp-clear"></div>
    <ul class="frp-widget">
                <li class="frp-news">
            <h3 class="widget-title"><span>united</span> news</h3>
<div class="frp-clear"></div>
<div class="frp-left">
    <a href="http://unitedconstruction.com/united-celebrates-groundbreaking-for-new-1-6-million-sf-business-park/"><img width="333" height="200" alt="United Construction" class="attachment-333x333 wp-post-image" src="http://unitedconstruction.com/wp-content/uploads/2015/12/featured-image-Phase-II-Groundbreaking.jpg"></a>
</div>
<div class="news-widget-info">
<div class="news-widget-title">
        <a class="news-widget-link" href="http://unitedconstruction.com/united-celebrates-groundbreaking-for-new-1-6-million-sf-business-park/">United Celebrates Groundbreaking for New 1.6 Million SF Industrial Park</a>
    </div>
<div class="arpw-summary">UC breaks ground on new industrial park in North Reno. The first tenant, Jarden Technical Apparel, consisting of Marmot and ExOfficio, is pre-leasing 270,000 SF</div>
</div>
<div class="frp-clear"></div>
        </li>
            </ul>
        <div class="frp-all-category-news frp-all-category-news-footer"><a href="?page_id=7">read more &gt;&gt;</a></div>
    </div>
</aside><aside class="widget arpw_widget random-posts masonry-brick" id="arpw_widget-2" style="position: absolute; left: 353px; top: 0px;">

<h3 class="widget-title"><span>united</span> projects</h3>
                <div class="arpw-block">

                    <ul>


                            <li class="arpw-clearfix">


                                    <a rel="bookmark" title="Permalink to Lake Washington Partners &ndash; SanMar Distribution Center" href="http://unitedconstruction.com/otw-portfolio/lake-washington-partners-sanmar-distribution-center-showroom/">
                                        <img width="333" height="200" title="Lake Washington Partners &ndash; SanMar Distribution Center" alt="Lake Washington Partners &ndash; SanMar Distribution Center" class="arpw-alignleft wp-post-image" src="http://unitedconstruction.com/wp-content/uploads/2015/06/featured-image-sanmar.jpg">                                  </a>


                                <h3 class="arpw-title">
                                    <a rel="bookmark" title="Permalink to Lake Washington Partners &ndash; SanMar Distribution Center" href="http://unitedconstruction.com/otw-portfolio/lake-washington-partners-sanmar-distribution-center-showroom/">Lake Washington Partners &ndash; SanMar Distribution Center</a>
                                </h3>


                                                                    <div class="arpw-summary">621,738 SFt build-to-suit distribution center features automated…</div>

                            </li>


                    </ul>
            <div class="frp-all-category-news frp-all-category-news-footer">                <a title="See More United Construction Projects" href="?page_id=32">read more &gt;&gt;</a>          </div>
                </div><!-- .arpw-block - http://wordpress.org/plugins/advanced-random-posts-widget/ -->

            </aside><aside class="widget widget_flexible-recent-posts-widget masonry-brick" id="flexible-recent-posts-widget-2" style="position: absolute; left: 706px; top: 0px;"><div class="frp-widget-wrapper frp-widget-">
        <div class="frp-clear"></div>
    <ul class="frp-widget">
                <li class="frp-news">
            <h3 class="widget-title"><span>united</span> community</h3>
<div class="frp-clear"></div>
<div class="frp-left">
    <a href="http://unitedconstruction.com/honored-by-step2-recognition/"><img width="333" height="200" alt="Thank You STEP2" class="attachment-333x333 wp-post-image" src="http://unitedconstruction.com/wp-content/uploads/2015/12/featured-image-STEP2-Thank-you.jpg"></a>
</div>
<div class="news-widget-info">
<div class="news-widget-title">
        <a class="news-widget-link" href="http://unitedconstruction.com/honored-by-step2-recognition/">Honored by STEP2 Recognition</a>
    </div>
<div class="arpw-summary">United Construction is honored by STEP2's acknowledgement during the recent Homes For The Holiday event.</div>
</div>
<div class="frp-clear"></div>
        </li>
            </ul>
        <div class="frp-all-category-news frp-all-category-news-footer"><a href="http://unitedconstruction.com/in-the-community/">read more &gt;&gt;</a></div>
    </div>
</aside>        </div><!-- .widget-area -->
    </div><!-- #secondary -->

        </footer>

Answer â„–1

One key distinction that stands out to me is the variation in height within your widget area div with the class "widget-area masonry".

The malfunctioning site displays a div height of height: 764px, whereas the properly functioning site boasts a height of 382px.

As a result, this discrepancy allows for the three divs to neatly stack on top of each other.

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

Unable to implement the `omega/theme.css` file within the angular.json configuration

"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", "node_modules/primeicons/primeicons.css", ...

Utilizing itemprop tag independent of itemtype declaration

My question is whether it's possible to use the itemprop attribute without using the itemtype. Can this be done? If so, how does using these attributes impact SEO? Is it recommended to always use itemtype? I assume it would be beneficial, but what if ...

Encountering a blank webpage displaying a warning that reads, "The use of 'event.returnValue' is outdated

Although this issue has been discussed before and was previously considered a bug, I am currently using jQuery v1.11.0, which should have resolved it. The problem I am encountering is that when my page loads, there is supposed to be a slide-in effect (as a ...

Utilize Python and BeautifulSoup for parsing HTML with multiple tags and classes

I am currently attempting to navigate through a complex HTML structure. Here is the snippet of the HTML code: <div class="example one"> <ol class="example two"> <li class="example three"> My object ...

Placing an icon and a title on the same baseline

I'm working on a new website design and I really like the layout shown in this image: https://i.stack.imgur.com/QuVRZ.png I've been struggling to align the icon with the title in a responsive manner. Here are some of the approaches I've att ...

Utilizing HTML/CSS to display text and an image positioned above a sleek navigation bar

I am struggling to align a logo on the left side of my website, with text on the right next to it, all placed above the navigation bar. Despite my efforts, I just can't seem to get them positioned correctly! CSS .headerLogo{ float:left; marg ...

There appears to be a slight issue with the tailwind dark mode not fully extending when scrolling to the bottom of the page

While using dark mode in a Next.js web app with Tailwind, you may have noticed that when scrolling, if you go past the scroll container (almost as if you're bouncing off the bottom or top of the page), the dark mode doesn't extend all the way. In ...

Modifying a css class via javascript

Is it possible to set an element's height using CSS to match the window inner height without directly modifying its style with JavaScript? Can this be achieved by changing a CSS class with JavaScript? One attempted solution involved: document.getEle ...

Implementing a method to pass total value to the <td> tag in angular JS using controller

I am having trouble calculating the total IR for each table cell. Despite my efforts, the function is not working as expected and I can't figure out why. $scope.getTotalb = function () { var totalb = 0; for (var i = 0; i < $scope ...

The nuSelectable plugin enhances the functionality of jQuery

I am currently experimenting with the jQuery nuSelectable plugin in order to enable users to select multiple items simultaneously. Unfortunately, I am encountering difficulties in making the selection work as intended. You can find the plugin here. After ...

The background image does not have the body padding applied

When creating a fixed top nav bar, I added padding to the body tag so that the nav bar always stays on top like this: body { padding-top: 70px; } Now, I want to set a background image for the body that covers the entire screen, so I added the foll ...

Tips for developing screen reader-friendly AJAX areas and managing updates to the DOM?

My interactive user process operates in the following manner: Users encounter a dropdown menu featuring a selection of cities. Upon picking a city, an AJAX request retrieves all buildings within that city and inserts them into a designated div (the AJAX ...

What is the best way to retrieve the height of a <DIV> element without factoring in the presence of a horizontal scrollbar with

I have created a unique jQuery plugin that involves utilizing two nested <DIV> elements. The outer div is set with a fixed width and overflow: scroll, while the inner div (which is wider) houses the content for scrolling purposes. Everything is fun ...

Tailored design - Personalize interlocking elements

I am currently working on a custom theme and I am trying to adjust the font size of Menu items. In order to achieve this, I have identified the following elements in the tree: ul (MuiMenu-list) MuiListItem-root MuiListItemText-root If I want to modify th ...

If a specific class is identified, add a border to the div when clicked using JavaScript

Is there a way to use javascript/jquery to add a border to a selected div? I have multiple rows with columns, and I want only one column per row to be highlighted with a border when clicked. Each row should have one column with a border, so it's clear ...

Unable to retrieve field values from Firestore if they are numeric rather than strings

I need to display this information in a list format: li.setAttribute('data-id', updatesArgument.id);//'id' here unique id Example 1 name.textContent = updatesArgument.data().count;// Works if String Example 2 let i=1; nam ...

Step-by-step guide to selecting a specific point on an HTML5 canvas using Python's selenium webdriver

Looking to automate interactions with a simple HTML5 application on a website using Selenium webdriver in Python with Firefox on Linux. The challenge is clicking a button on an HTML5 canvas, then dragging one or two objects around the canvas post-button cl ...

Tips on personalizing buttons within Telerik form or Kendo form

Having recently started working with Telerik UI, I am struggling to customize a Kendo form in ASP.NET Razor Pages. Specifically, I am trying to rename a button but cannot locate the button field within the code. Despite following the guidelines provided in ...

Ways to change the CSS styling of the placeholder attribute within a textarea or input field tag

I am currently working on adjusting the font size of the text within the placeholder attribute of a textarea element. While I have been successful in achieving this using vanilla CSS, I have encountered difficulties when trying to implement the same concep ...

Is there a way to retrieve just the parent's value?

<div class="island biz-owner-reply clearfix"> <div class="biz-owner-reply-header arrange arrange--6"> <div class="arrange_unit biz-owner-reply-photo"> <div class="photo-box pb-30s"> <a hre ...