Hi! I’m having a problem with setting a div vertically aligned. I’ve attached an image - I want to put DIV3 in the top of DIV1, however there is this DIV2 (serves as a line break before and after some content, DIV2 also has some content inside) which doesn’t let me do it. All of the DIV’s must be used and are printed in this order DIV1, DIV2, DIV3. I’d like to know if there is any CSS solution to do this, no tables, please?
We really need a link to a live version of your page, or if that’s not available, your full HTML and CSS, so we can see what’s going on. Otherwise, we’re just guessing. 
Is there some compelling reason why you need DIV3 to appear first on the page, but last in the markup? It seems a very odd way to do things.
The code is nothing special, here’s a simplified version:
<div id='DIV1' style="border: solid 1px red">
Content, content, content
<div id='DIV2' style="border: solid 1px blue">content, content, content on a separate line</div>
Some more content
<div id='DIV3' style="float: right; border: solid 1px green">content - operation buttons</div>
</div>
What I’m looking for is something like vertical-float: top. This is a structure for a record, that I take from a DB. DIV3 has the operation buttons, I can print it only after all the records are printed.
You could give the container position: relative and then give div3 position: absolute, and give it coordinates like top: 0; right:0; etc.
Hi,
If your div3 has a fixed height then ralph’s suggestion will work and you can accommodate for it’s space with some top padding on div1.
If div3 has fluid height content then have a look at the solutions for CSS [URL=“http://www.sitepoint.com/forums/showthread.php?719912-CSS-Test-Your-CSS-Skills-Number-36-Content-First&p=4766872#post4766872”]Quiz #36. However the quiz was geared around bringing the last div in the source and making it render first in the display, not nesting it in the first block.
Thanks, works great!