CSS/HTML: positioning something relative to a table

nobodythere · 27-06-2007 09:18PM #1

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+ */
}

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.

Evil Phil · 28-06-2007 07:33AM

I'll move this over to Webmaster & Flash.

matt-dublin · 28-06-2007 09:22AM

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;

forbairt · 28-06-2007 09:48AM

matt-dublin wrote:

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 ...

CSS/HTML: positioning something relative to a table

Comments