Question

Here’s a fiddle demonstrating the problem http://jsfiddle.net/mjmitche/MMWXj/1/ I have an “About” section and a “Skills” Section. If you click on the title to either of those sections, there is a drop down that reveals the relevant content. If “About” is open, then it will close if you click to open “Skills.” Here “about” has been clicked…

 About

   this is About content revealed by click

 Skills

And here “Skills” has been clicked

About
Skills

this is Skills content revealed by click

Instead of having “about” title and “skills” title stacked on top of each other, I’d like them floated side by side, but with the behavior of the content within each div the same,like this (if the skills header has been clicked)

About Skills

   this is Skills content revealed by click 

This is the basic html structure (i’ve left a few for-the-moment unnecessary bits in out of fear that, once I find the solution to the problem, inserting those bits back in will change things).

I’d be very grateful if you can explain how to achieve that…

<div id="who">
    <h1 class="who closed">About</h1>
    <div class="content">
      <div id="latest" class="three_columns">

        <p>
          <strong>Boo!</strong>
        </p>

      </div>
    </div>
    </div>

 <div id="what">
    <h1 class="what closed">Skills</h1>
    <div class="content">
      <div id="consulting" class="three_columns">

        <p>
          <strong>Boo2!</strong>
        </p>

      </div>
    </div>
    </div>

—
CSS

div.content { width: 500px; overflow: hidden; margin-left: auto; margin-right: auto;} /* This clears the floats of the child elements, see http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */
div.three_columns { float: left; width: 290px; margin: 0px; padding: 10px;  }

#latest{
    padding-left: 30px;
}

/* General headline styles */
/*h1 { font-size: 40px; margin: 0px; padding: 10px; cursor: pointer; }
h2 { font-size: 16px; }*/

h1.who, h1.what, h1.how {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;

}

h2.who, h2.what, h2.how {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;
}

.blue { color: #00b9f1; }
.green { color: #99cc00; }

/* General link styles - Colors: pink #ec008b, blue #00b9f1, dark gray #222, light gray #ebebeb; */
/*a { color: #222222; text-decoration: none; }
h1.hover, a:hover { color: #ec008b; cursor: pointer; }
h1.active, a:active { color: #00b9f1; cursor: pointer; }*/

/* General list styles */
ul { margin: 0px; padding: 0px; }
ul li { margin: 0px; padding: 0px; list-style: none; }


#cent {

    margin-left: auto;
    margin-right: auto;
    width:
}

/*** Styles for the main content sections ***/
div#who, div#what, div#how { height: 100%; margin: 0px; padding: 0px; }

JS

$(function() {

    // Hide all closed sections
    $(".closed").next().hide();

    // Add slide functions to all sections (h1 elements)
    $("h1").click(function () {
        if($(this).is('.closed')) {
            $(".open").delay(200, function() { $(this).next().slideUp("slow"); });
            $(this).delay(200, function() { $(this).next().slideDown("slow"); });
            $("h1").deactivateElement();
            $(this).activateElement();
        }
        else if($(this).is('.open')) {
            $(this).delay(200, function() { $(this).next().slideUp("slow"); });
            $(this).deactivateElement();
        }
    });

    // Add a function to toggle the CSS styles
    $("a#style_switcher").click(function () { flag = !flag; dark.disabled = flag; });

    // Add hover functions to all sections (h1 elements)
    $("h1").hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });


    // Delay the call to (slide) functions
    // => http://james.padolsey.com/javascript/jquery-delay-plugin/
    $.fn.delay = function(time, callback) {
        jQuery.fx.step.delay = function() {};
        return this.animate( { delay: 1 }, time, callback);
    }

    // Set an element class to 'open' or 'closed'
    $.fn.activateElement = function() { switchClasses($(this), 'open', 'closed'); }
    $.fn.deactivateElement = function() { switchClasses($(this), 'closed', 'open'); }

    // Do this at start
    initialize();
    $(".who").delay(600, function() { $(this).next().slideDown("slow"); });
    $(".who").activateElement();
});


// Initialization function
function initialize () {
    flag = true;
    dark = document.getElementById("dark_css");
    dark.disabled = flag;

    // Set year in copyright section
    document.getElementById('year').innerHTML = (new Date()).getFullYear();
}

// Utility function for switching/toggling classes
function switchClasses (element, classToAdd, classToRemove) {
    element.addClass(classToAdd);
    element.removeClass(classToRemove);
    // De/Activate the given element
    (classToAdd == 'open') ? element.addClass('active') : element.removeClass('active');
}

Answer 1

Change the last and First CSS class to this:

/*** Styles for the main content sections ***/
div#who, div#what, div#how 
{ 
   height: 100%;
   margin: 0px;
   padding: 0px;
   float:left; // new
}

div.content 
{ 
   position:absolute; //new
   width: 500px;
   overflow: hidden;
   margin-left: auto;
   margin-right: auto;
}

Edited!