SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning div vertically in the top

    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?
    Attached Images Attached Images
    • File Type: png 1.png (1.2 KB, 9 views)

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,330
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code is nothing special, here's a simplified version:

    HTML Code:
    <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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You could give the container position: relative and then give div3 position: absolute, and give it coordinates like top: 0; right:0; etc.

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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 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.

  6. #6
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, works great!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •