Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS/HTML: positioning something relative to a table

Options
  • 27-06-2007 10:18pm
    #1
    Closed Accounts Posts: 2,349 ✭✭✭


    Sorry I can't give code examples here but I'm working on a CMS and can't just give everybody the keys :)

    I have a page which shows the last 5 news items entered into the database.

    That lorem ipsum stuff is a <div> with the following CSS class:
    .content{
        overflow: hidden;
        font-size:smaller;
        height: 290px;
        border-bottom: 1px #000000 dotted;
        // For wrapping really long lines
        white-space: pre-wrap; /* CSS3 */
        word-wrap: break-word; /* IE 5.5+ */
    }
    
    untitled2.JPG


    What I'm trying to do is to position all of those picture buttons at the bottom right of the div, so that it floats over the text. So far I've only been able to put it after the text by making the buttons {position: relative; left: 100%}

    I'm also looking for a way to detect the total height of the text (the font size varies) because if only one line is entered I still end up with the div being 290px high.


Comments

  • Registered Users Posts: 7,468 ✭✭✭Evil Phil


    I'll move this over to Webmaster & Flash.


  • Registered Users Posts: 4,468 ✭✭✭matt-dublin


    put the buttons in a div within the div for your content.

    give it a css of :

    position:absolute;
    right:0px;
    bottom:0px;
    width: .....

    for the height jobber
    height:auto;


  • Registered Users Posts: 3,594 ✭✭✭forbairt


    put the buttons in a div within the div for your content.

    give it a css of :

    position:absolute;
    right:0px;
    bottom:0px;
    width: .....

    for the height jobber
    height:auto;

    Absolute is going to position it absolutely in relation to the page ...

    You'd want to do relative positioning
    position:relative;
    right:0px;
    bottom:0px;
    

    no idea if that'll do the job for you though ...


Advertisement