SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS positioning

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    norway
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS positioning

    Hello

    So, I have a table-cell where I display 2 divs. One I want at the top, one I want at the bottom.

    I tried a few things but it wouldn't work quite as I wanted.

    Example:
    <table><tr><td><div style="position: relative;"><div>This should be at the top</div><div style="position: absolute; bottom: 0px;>Bottom text.</div></div></td></tr></table>

    I have multiple columns, and so the first div usually doesn't fill out the height completely.

    What would be cool was if you could do like
    <p>This is regular text</p><p style="float: bottom">Bottom-stuff here</p> but I know float only supports horizontal positioning.

    How's the usual way of doing this? (I wouldn't be surprised if it would be yet another css-hack..)

    Thanks!

  2. #2
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you mixing tables and layers? Either go all the way with tables or move your design over to CSS positioning with layers.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    norway
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    It sais the subject is optional, but the forum dissagrees :)

    I guess, I'm just editing a bit on a site and wanted to bottom-align a "read more" line.

    By the way, if you do something like

    div { float: left; }

    <div>something on row 0, column 0</div>
    <div>something on row 0, column 1</div>

    <div>something on row 1, column 0</div>
    <div>something on row 1, column 1</div>

    the last 2 obviously will just be on row 0, as column 2 and 3.
    How do I go to the next "row" ?

    And what if say the first div has text that makes it 200px high, which the second div only has text to make it 100px hight? I'm thinking the third div would be aligned right after the first div, looking as it should, which the last div would be further up, aligning with the second div.

    This would mess up the "grid" I want to preserve. So to fix this I guess I would have a box for each row and then a box for each elements? It would be okay, but it seems to me like CSS2's boxmodel support isn't very good..

  4. #4
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do this:
    Code:
    div.row { clear:both; }
    div.col { float:left; width:40%; }
    HTML Code:
    <div class="row">
       <div class="col">row 0, col 0</div>
       <div class="col">row 0, col 1</div>
    </div>
    <div class="row">
       <div class="col">row 1, col 0</div>
       <div class="col">row 1, col 1</div>
    </div>
    And a nice complex css case to study is http://www.positioniseverything.net/...olcomplex.html

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    norway
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! Seems like what I'm looking for.

    I still have the problem in getting a "footer" in each "cell" though.

    I tried making the cells have position: relative and then the "footer" div have position: absolute; and bottom: 0px;
    This made it go to the bottom of the screen though, I guess it ignores the parent-container if it's a "floater".

    This won't matter much though, because the height of the two divs on the same row most likely won't match.

    I've seen a hack for making both "cells" in the same row equal height using javascript.. This makes the table-approach seem more attractive to me.

    I could always create a new row for each "read more" lines, but it wouldn't really be right - it IS part of the cell where the rest of the news is. (If someone used another stylesheet this would look wrong).

    I could combine this with another parent-container, so that there would be a div called "newsbox", which would contain 2 "news" which used float to align properly, then a new row with the "read more" divs. So now every 2 posts are assosiated as one.

    So, is there any way to get 2 colums to "depend" on each other like tables do, without javascript?

    Thank you.
    Last edited by Aphenitry; Oct 8, 2003 at 18:42.


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
  •