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.