Floating divs side-by-side that contain Apex:repeat without table?

Question

I'm an Apex developer that's trying to style a few Visualforce components within divs, but I have absolutely no web development experience so I was hoping someone could point out what I'm doing wrong here. I don't know how to handle the apex:repeat component. A requirement is not using table tags - if this is not possible without table tags, that's a valid answer too - I'll just have to report that information. I want the following four sections (color-coded for reference) to be rendered side-by-side like so:

The two middle (blue and violet) sections are generated from the Apex:repeat component and will be anywhere from one to five columns. From my research, I can do this by wrapping them in a parent div with a set width, and then floating the four child divs to the left, correct? However, when I do this with the following style (green is #leftLabelColumn, blue and violet are #middleGeneratedColumns, red is #totals):

#mainCenterBlock {
    width: 1300px;
}

#leftLabelColumn {
    float:left;
    width:200px;
}

#middleGeneratedSchedules {
    float:left;
    width:200px;
}

#totals {
    float:left;
    width:200px;
}

It's rendered as this:

So the second apex:repeat instance (purple) is being pushed under the first apex:repeat instance (blue).

How can I fix my styles so this is rendered appropriately? Do I maybe need to wrap each individual apex:repeat column in its own ?

Let me know what additional code I can provide for clarity, this was already a long post so I didn't want to make it any more verbose. Additionally, since there could be up to five columns from the apex:repeat component, I need them to be rendered all side-by-side.

Answer 1

So your issue is that you want your apex:repeat elements to be rendered adjacent to each other instead of rendering the second repeat below the first one.

Firstly, if it is possible to use a wrapper class and fetch all your data so that you can use one apex:repeat to render it, then do this.

If not, you can use CSS to position two <div> elements next to each other.

So you can try something like this:

<apex:outputPanel layout="block">
    <apex:outputPanel layout="block">
    Your first apex:repeat here
    </apex:outputPanel> 
    <apex:outputPanel layout="block">
    Your second apex:repeat here
    </apex:outputPanel> 
</apex:outputPanel>