PHP control CSS Settings

[Wizywyg]

Need a little help in having PHP control a setting for a CSS div id.


Basically, I have a a 2 column CSS Layout like so:

<style>
#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:70%;
    background:yellow;
}

</style>

<div id="container1">
    <div id="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis   augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere   sem. In feugiat ante in orci ultricies non sagittis felis consectetur. </div>
    <div id="col2"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis   augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere   sem. In feugiat ante in orci ultricies non sagittis felis consectetur.   In hac habitasse platea dictumst. Etiam urna magna, tincidunt eu   venenatis ac, imperdiet fermentum arcu. Pellentesque vehicula   sollicitudin bibendum. Donec eu eros nibh. Phasellus ultricies aliquet   mollis. Morbi vel ipsum vitae tellus porta accumsan quis quis ligula.   Proin nulla tellus, mattis et interdum non, convallis ac ipsum. Morbi   tellus nisl, tempor condimentum tincidunt a, tincidunt sed tellus. Sed   cursus posuere erat a venenatis. Donec vel velit felis, sit amet posuere   tortor. Etiam tincidunt orci ut est tincidunt bibendum vel in erat.   Nunc dignissim faucibus enim sed rhoncus. Duis quam tellus, iaculis   feugiat elementum eu, fermentum malesuada mauris. In metus nibh, sodales   eget facilisis a, sollicitudin id lorem. </p>
            <p> Donec at eros tortor. Quisque et tellus ipsum, id sodales erat. Ut   commodo ornare nisl, ut rhoncus arcu sagittis vel. Aliquam erat   volutpat. Nulla non facilisis nunc. Suspendisse potenti. Suspendisse   nulla massa, consequat nec tincidunt id, aliquam quis lacus. In hac   habitasse platea dictumst. Aliquam sit amet pharetra magna. Praesent   nibh est, consequat vitae congue nec, ullamcorper sit amet magna. Etiam   sagittis dignissim mauris, eu dapibus leo fringilla eu. Morbi in ipsum   lorem. Morbi pharetra sem at justo dictum non imperdiet libero   convallis. Etiam sed arcu arcu. Maecenas vulputate, lorem at dignissim   consequat, felis mauris pharetra ipsum, in condimentum urna ipsum sit   amet lacus. Quisque facilisis fringilla felis et feugiat. Donec vel   tincidunt dolor. Praesent congue nunc nec augue ornare vehicula. </p></div>
   
</div>

Which produces this:





Col 1 - is a side column (red) that will or will not contain content (example an image banner or flash banner)

Col 2 - is the main content column



What I need to have done, is that if there is no content in Col 1, Col 2 will adjust its width to fill up where col1 was, like so:




How do I set up a PHP script to detect to see if:
1) there is content in Col 1 to have Col 2 keep its 70% width
2) Else, if there is no content in col 1 to have col 2 take a width of 100%


thanks for your help.

[Beverleyh]

I read your other post so I'm following...

Here's one way to do it;

1. edit the CSS for col2 to remove the width property altogether;

#col2 {
    float:left;
    width:70%; // delete this line
    background:yellow;
}

Block elements, such as div's, default to a width of 100% if a width isnt specified, so if col1 (with a width of 30%) is sat alongside it, col2 will fill 100% of the remaining available space (ie - 70%) but if col1 isnt there, col2 will again fill 100% of available space, which is now everything (it has no col1 to share with).

2. remove the code for col1, including its div, from the main page - this will be echo'd back into the page with php later;
<div id="col1"><p>content - Lorem ipsum.</p></div> // removed from main page

3. put the HTML markup for col1, minus the div into a .txt file alongside the main page;
<p>content - Lorem ipsum.</p> // now in a text file

4. In place of the code your removed in step 2, add the following;

<?php 
$col1_content = 'content_for_col1.txt'; // reference your content .txt file here
$fh_col1_content = fopen($col1_content, 'r');
$theData_col1_content = @fread($fh_col1_content, filesize($col1_content));
fclose($fh_col1_content);
$insert_col1_content = $theData_col1_content;
if ($insert_col1_content != '')
    {
    echo '<div id="col1">'.$insert_col1_content.'</div>';
    } 
?>

So basically the code in step 4 is reading from the 'content_for_col1.txt' file and if it isnt empty, it echo's the <div id="col1"> with the contents of the file inside, back onto the page. The CSS width thing then kicks in.

Hope that helps.

[Beverleyh]

Did this suggestion suit your requirements or did you find another solution?

If you devised another fix, please can you post it here so it may help others in a similar situation in the future.