I am trying to accomplish the following:
I have a page with a div. The div encapsulates a report. The report div has within it 3 more divs, reportInfo, icons, reportBody.
reportInfo is a paragraph of text, icons contains icons with links for report downloading, and reportBody contains a wide report with tables and stuff.
I want the reportInfo to be above the top-left corner of reportBody, and icons to be above the top-right corner of reportBody. I tried floating reportInfo to the left and icons to the right. But when I do that, reportBody, instead of staying under them, floats up and kind of swallows them - so both reportInfo and icons appear overlaying the top of reportBody.
Thank you - this really helped. It almost works... I need help with one final touch..
I floated reportInfo to the right and icons to the left. Now they both appear on top of the reportBody. But... icons are always top-aligned to reportInfo - which means that if reportInfo is only one line, icons are immediately above reportBody, and if reportInfo spans multiple lines, the gap between icons and reportBody increases. Any suggestions as to how I can resolve this to make icons always just a few pixels above the top-right corner of reportBody, regardless of how tall reportInfo is?
I wasn't sure how to do this so that the bottoms of the divs were aligned. Just floating the icons div right and having it clear left wasn't working too well. It was forcing the report Info div up so that they were uneven at the bottom. So I found something similar to what you are trying to do and modified for your layout.
Hey that's ok, tables are a perfectly legitimate solution; sometimes we don't have time at the moment to go through the learning curve for other options. Anyway, I learned a lot by working out this answer, so nothing is wasted.