Forums

Embeding php areas in div but have background extend to cover it?

Permalink
I need to use one div as a background layer and then embed other div in it.
if the background css is:
#content {
   width: 700px;
        height: 1000px;
   margin: 0 auto;
   padding: 20px 0 0 0;
   background: #ddc347;
}


it works perfect and the embedded div are placed where they should be with the right background.
The problem is I cannot use a static height and if I leave the height as auto the background will only go as far as content within the background div.

This is the code im using:
<div id="content">
   <?php
      $a = new Area('Header');
      $a->display($c);
   ?>
   <div id="colOne">
      <?php
         $a = new Area('Main');
         $a->display($c);
      ?>
   </div>
   <div id="colTwo">
      <?php
         $ah = new Area('Header Nav');
         $ah->display($c);
Viewing 15 lines of 26 lines. View entire code block.


So the 'content' background only goes to the end of the header element in the content block.
The columns and footer inside the 'content' area do not have a background?
The site pages will be over various length so that is why I cannot hardcore a height.

Any help is appreciated
 
jbx replied on at Permalink Reply
jbx
Without seeing your design, it's difficult to be precise about how to fix this, however, I used to have a 3 col layout where I needed the backgrounds of the left and right cols to always be full height, just as you say. I used a background image on the body that contained the background for the columns, so the image wasn't actually attached the sidebar divs at all. The divs just sat over the top of the page background image.

Would that work for you?

Jon
SVijay replied on at Permalink Reply
SVijay
Hi

Can you post the CSS for colOne and colTwo div? so that i may help you
Krooger replied on at Permalink Reply
Sorry for the lack or information:
This is the CSS:
/* Content */
#content {
   width: 900px;
   margin: 0 auto;
   padding: 20px 0 0 0;
   background: #ddc347;
}
/* Column One */
#colOne {
   float: left;
   width: 470px;
background: #121212 url(images/img1.png) repeat-x;
}
#colOne h2 {
   margin-top: 0;
Viewing 15 lines of 65 lines. View entire code block.


content is the background section and it will hold these 2 columns.

This is how it is embedded

<div id="content">
   <?php
      $a = new Area('Header');
      $a->display($c);
   ?>
   <div id="colOne">
      <?php
         $a = new Area('Main');
         $a->display($c);
      ?>
   </div>
   <div id="colTwo">
      <?php
         $ah = new Area('Header Nav');
         $ah->display($c);
Viewing 15 lines of 26 lines. View entire code block.


This is the website for visual aide

http://devintest.mygamesonline.org...

Sorry for the messy code, this is more of a test area and i'll clean it up once I get it working :P

I'm new to PHP and as you can see my sections consist of just the php code to allow C5 to add blocks through the GUI. So as I add block to the columns I need the content section to grow with it. This is what I cannot solve.



EDIT: I have discovered that this page looks quite different in mozilla and IE, in IE it almost look exactly how I wish it to. However in mozilla it is just completely wrong.

Unfortunately I cannot test any other browsers at the moment but to understand why it works in IE and not FF would be a great start.

Annnnnd I test IE on a different computer and it dosent work, it looks just like firefox did on the last computer. ARG!
Krooger replied on at Permalink Best Answer Reply
Should anyone run into this problem the solution I found was to insert
<div style="clear:both;"></div>

At the very bottom of the content div

This extended the content div right to the bottom and changed according to the length of the embedded content.