Column switches postition and can't work out why

Posted on 2011-04-27
Last Modified: 2012-06-27

Note the testimonials column on the right changes to move to the far left ever so often on refresh and this happens due to the testimonial section loading random text.

I canno figure out why the column moves though, I know it must be something to do with heights on the columns somewhere but I cant figure out where, any help please?

CSS is here

Question by:Sideas
    LVL 22

    Accepted Solution

    The is happening due to the .main div containing your columns having overflow:auto property.
    When the text is too long it renders the scroll bar which in return shrinks the div's width so it doesn't fit the three columns.

    Instead change it to overflow:hidden, it should still work well and clears it content, you may also add bottom padding to give some bottom clearance for the instance when it has longer content that renders too close from the footer.

    Update your .main class as below
    .main {
        background-color: #FFFFFF;
        overflow: hidden;
        padding-bottom: 15px;
        width: 994px;

    Open in new window

    LVL 2

    Author Closing Comment

    Quick an accurate, thanks :)

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    Suggested Solutions

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now