Question

I’ve searched google and SO for a solution to this problem but have not found it, perhaps this is due to my uncertainty as to how to word it best.

Here is the issue:

I have a 3 column page using divs. The divs are as follow, left, middle and right container divs, with various content inside. What I need them to do is align horizontally from the top. What they are currently doing is some jigsaw jagged aligning. I believe this is because of the content inside (as I’ve altered everything else without result), which varies from titles with padding around it, to text, fb like buttons, etc. As you can see here, http://sunnahspace.com the temporary double line on the page is what I am trying to align them against. I can post all the code you need but as it is a lot I would prefer not to bog everyone down with a lot of reading, I will post the css and if you ask for something specific I will post it, otherwise it can be viewed from the source for the index page linked above. And please go easy on me, I’m a bit of an idiot when it comes to developing, and I’m sure you’ve all been noobs before. Thanks in advance.

Here is the css for the 3 divs:

#middle_container {
    float: right;
    width: 60%;
    padding: 5px;
    margin:auto;
}

#right_container {
    float: right;
    width: 20%;
    padding: 5px;
    margin: auto;
}

#left_container {
    float: right;
    width: auto;
    min-width: 200px;
    padding: 5px;
    margin: auto;
}

Answer 1

FIrst of all you need to take off the first spacer above the first column_middle_temp1.

Second you need to remove margin-bottom: 20px from the top_container.

Lastly you need to add a at the bottom of:

<div id="left_container">...</div><br clear="all" />

This is what I saw right away, if this still doesn’t work let me know.