CSS with dynamic programming

programming web dev
1

Hi,

I have a website where I’m using CSS boxes for the layout and also am using dynamic programming. I have a side menu which I have as a DIV Float box and then I have a DIV for the main content both of which are inside my Container DIV.

The probelm I am having is that the menu size changes dynamically according to who logs into the site and what section of the site they are on. I need the main content DIV to always be the same height as the Menu. IE7 does this automatically but Fire Fox doesnt. Nothing I try seems to cure the problem in both browsers. I’m new to CSS so maybe there is some other way I can do this or a property I can add onto my DIV’s.

Thanks for your help!

2

u need to post code so someone can help you. just like a mechanic can’t fix a car w/o the car right there.

3

ok, here’s the code.

This is how the PHP page is set up.
<body>
<div id=“container”>
<!-- start #header -->
<div id=“HeaderInPages”>
<?php include(“Header.php”); ?>
</div>
<div id=“mainContent”>
<!-- start #menuBar -->
<?php include(“Menu.php”); ?>
<!-- end #menuBar -->
<!-- ***** START BODY ***** -->
<P class=“headingsPage”>PUT TITLE HERE</P>
PUT BODY HERE
<!-- ***** END BODY ***** -->
</div>
<!-- end #container -->
<!-- start #footer -->
<div id=“footer”>
<p class=“footerText”></p>
</div>
<!-- end #footer -->
</div>
</body>

Here’s the code in the CSS document
@charset “utf-8”;
body {
font: 10pt Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0;
padding: 0;
color: #333333;
}
#container {
width: 900px;
background: #FFFFFF;
margin: 0;
text-align: left;
}
#header {
padding: 0;
margin: 0;
}
#menuBar {
float: left;
width: 150px;
margin: 0px 10px 0px 0px;
padding: 10px;
background-color: #cc0000;
}

#mainContent {
margin: 0;
border-right: 10px solid #cc0000;
}

#mainContent p {
margin: 0;
padding: 10px;
}

#footer {
margin: 0;
padding: 0;
background:#cc0000;
margin-top: 0px;
background-image:url(img/footer2.gif);
background-repeat: no-repeat;
background-position: bottom;
height: 197px;
}
#footer p {
margin: 0;
padding: 0px;
}

4

can anyone help? I think what I need is someone to make the container DIV always be at least the height of the menu bar that is imported using PHP and the menu bar is a float DIV.

5

I finally found a solution. I was missing a tag that makes it happen
<br class=“clearfloat” />

I wanted to post the solution so anyone else that had this problem and comes across this has it.

New code in PHP page
<body>
<div id=“container”>

            &lt;!-- start #header imported --&gt;
          &lt;div id="HeaderInPages"&gt;
            &lt;?php include("Header.php"); ?&gt;
          &lt;/div&gt;
          &lt;!-- end #header --&gt;
          
        
          &lt;!-- start #mainContent --&gt;
  		&lt;div id="mainContent"&gt;
          
                &lt;!-- start #menuBar imported--&gt;
                &lt;?php include("Menu.php"); ?&gt;
                &lt;!-- end #menuBar --&gt;
                
              
                &lt;!-- ***** START BODY ***** --&gt;
    			&lt;P class="headingsPage"&gt;PUT TITLE HERE&lt;/P&gt;
                PUT BODY HERE
                &lt;!-- ***** END BODY ***** --&gt;

                             
              &lt;br class="clearfloat" /&gt;
              &lt;!-- This clearing element is to force the content section to extend to the size of the floating menu --&gt;
        
  		&lt;/div&gt;
          &lt;!-- end #mainContent --&gt;
          
          &lt;br class="clearfloat" /&gt;
          &lt;!-- This clearing element is to force the container DIV to extend to the size of the floating menu --&gt;
        
       
        &lt;!-- start #footer --&gt;
          &lt;div id="footer"&gt;
            &lt;p class="footerText"&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;!-- end #footer --&gt;

&lt;/div&gt;
&lt;!-- end #container --&gt;

</body>