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:

http://img441.imageshack.us/img441/5760/20100806100716.jpg



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:

http://img823.imageshack.us/img823/8774/20100806100800.jpg


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.