SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    advanced absolute positioning

    does anyone know of a way to position an element absolutely based on a mathematical calculation? eg. want to position a <div> element 10px from the bottom of the <div> element right above it.

    i heard on a post to try something like this:

    #div2 {
    top: #div1.bottom + 10px;
    }

    any ideas, or is this jibba jabba?

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you maybe do it using a JavaScript document.write statement to dynamically insert the position? Something like:

    Code:
    var first_div_height = 200;
    document.write ("<style type='text/css'>#div1 { position: absolute; top: 10px } #div2 { position: absolute; top: " + (first_div_height+10) + "px }</style>");

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not just give the lower div a margin-top: 10px css attribute whilst keeping the position: relative?
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Bill Posters
    Why not just give the lower div a margin-top: 10px css attribute whilst keeping the position: relative?
    This could lead to unpredictable results if the above <div> is absolutely positioned.

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True, but we've yet to establish whether the upper div is positioned relatively or absolutely.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the above <div> IS absolutely positioned... i want to use this for the following scenerio.

    two column with footer underneath. one column is absolutely positioned and the other is floating what happens is the footer will display underneath the absolutely pos. column if the column is too long. any ideas?

  7. #7
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any particular reason why you absolutely want to have a floating and absolutely positioned column?

    A two column layout with footer can easily be achieved by leaving one column static with a large margin to accomodate the other, floating, column and put clear:both on the (static) footer.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  8. #8
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    at the moment, i have a layout as follows:

    Code:
    #rightContent {
    	float: right;
    	width: 45%;
    	text-align: left;
    	padding: 0px 20px 25px 0px;
    	background-color: #FFFFFF;
    } 
    
    #leftContent {
    	float: left;
    	width: 45%;
    	padding: 5px 10px 25px 20px;
    	background-color: #FFFFFF;
    }
    
    #bottomSpacer {
    	clear:both;
    }
    and it's working fine if i don't include any images in the columns... what will happen is the right column will fall under the left column. what i want to happen is scrollbars to appear (horizontal), to view the remaining unseen portion of the image. i guess this post is not much concerned with layout issues, but rather handling images in css. it is very frustrating at the moment, and i thank you for your patience and willingness to help so far. any ideas?

  9. #9
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    those are all contained within another DIV by the way, but i guess that's irrelevent. the reason i asked about placing an element absolutely based on the properties of another element, is because this would be a great way to achieve "flow" with absolute positioning and relative positioning... would it not? think about it, sounds damn good to me.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    what i want to happen is scrollbars to appear (horizontal), to view the remaining unseen portion of the image.
    Just add overflow: auto; in your floating columns.

    BTW you said you had one absolute and one floating column but the code you showed has 2 floats and no absolute position

    Hope this helps.

    Paul

  11. #11
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yah, i'm sorry... i keep changing my positioning schemes... but i keep reverting to my old favourite (that you actually helped me out with! thank you) which is the double float, no absolute... i try what you mentioned right away. cheers.

  12. #12
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still not working Paul. do you have any examples of a similar situation that works? i'm losing hair by the minute...

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I just added overflow auto to your code and it worked. Unless we're talking at cross purposes.

    Here's an example.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #container {
     width:60%;
     background-color: #FFFFCC;
    } 
    #rightContent {
     float: right;
     width: 45%;
     text-align: left;
     padding: 0px 20px 25px 0px;
     background-color: #FFFFCC;
     overflow:auto;
    } 
    #leftContent {
     float: left;
     width: 45%;
     padding: 5px 10px 25px 20px;
     background-color: #FFFFCC;
     overflow:auto;
    }
    #bottomSpacer {
     clear:both;
    }
    </style>
    </head>
    <body>
    <div id="container">
     <div id="rightContent">
    	<p>right text</p>
    	<p><img src="uploadedimages/me2.jpg" width="400" height="129" /></p>
      </div>
     <div id="leftContent">left text</div>
     <div id="bottomSpacer">&amp;nbsp;</div>
    </div>
    </body>
    </html>
    If this isn't what you mean then can you post some code so we can see what you're doing

    Paul

  14. #14
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thank you for your patience... but i don't see your example working on my Mac (OS 10.2.6) with Safari or IE 5.2. I apologize if you think i am being ignorant, but honestly, i can't get it to work. the left content gets bumped down underneath the right.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Polka,

    Don't worry I think we we're talking at cross purposes anyway.

    The code above was for when you put an image into the float and the image is bigger than the float then the scrollbars appear to keep the image within the float.

    What I think you're talking about is when you resize your window and the right float displaces the left float when there's no where else to go. I'm afraid that this is the behaviour of floats and they are just doing what they were designed to do. That is float around the content.

    If this is your problem then I can't think of an answer at present, sorry.

    Paul

  16. #16
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no worreis, thanks for the help though. i have decided to have one main content <div> and within it, house a <table> with two <td>'s. one for each column. what are your thoughts on this? am i a failure to all CSS kind?

  17. #17
    SitePoint Zealot poLka's Avatar
    Join Date
    Apr 2003
    Location
    GF
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey guys, any idea how to mimic an image using a <div> for instance, i got a two column table and i want the left column to stay a certain width after the window is rezised. after the left column reaches that min-width that it can be, i want horizontal scrollbars to appear on the browser window. just like if i were to have transparent gif in the left column with a set width. how can i achieve this effect with CSS?


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
  •