SimplePortal

Customization => Custom Coding => Topic started by: ScottyBoy on June 25, 2010, 06:02:26 PM

Title: Absolute Positioning in an SP Page
Post by: ScottyBoy on June 25, 2010, 06:02:26 PM

For some reason, whenever I try to use position:absolute; or float:right/left; in an SP page, the content goes outside the box (see screen shot). Any idea why that happens?

Page Code

Code: [Select]

<?php

function headerText($title)
{
echo '<div class="cat_bar"><h3 class="catbg" style="font-size: 1.3em; font-weight: bold;">', $title ,'</h3></div>';
}

headerText("Developer");

echo '
<span class="staffLeft">left</span>
<span class="staffRight">right</span>
';
?>

CSS

Code: [Select]

/* Staff Page block classes */
.staffLeft
{
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}

.staffRight
{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
}


Title: Re: Absolute Positioning in an SP Page
Post by: grafitus on June 25, 2010, 07:16:30 PM

What is your browser? If you use IE6, this very normal. :D

Title: Re: Absolute Positioning in an SP Page
Post by: ScottyBoy on June 25, 2010, 07:54:26 PM

I use Firefox 3.6.4.

Title: Re: Absolute Positioning in an SP Page
Post by: Nathaniel on June 25, 2010, 11:02:49 PM

Try the code below:

Code: [Select]

<?php

function headerText($title)
{
echo '<div class="cat_bar"><h3 class="catbg" style="font-size: 1.3em; font-weight: bold;">', $title ,'</h3></div>';
}

headerText("Developer");

echo '
<div style="overflow: auto;">
<span class="staffLeft">left</span>
<span class="staffRight">right</span>
</div>
';
?>

Title: Re: Absolute Positioning in an SP Page
Post by: ScottyBoy on June 26, 2010, 12:18:43 AM

Thank you very much, that worked perfectly.  ;D