# CSS with dynamic programming

**URL:** <https://forum.kirupa.com/t/css-with-dynamic-programming/263096>\
**Category:** web dev\
**Created:** [June 12, 2008, 3:42pm UTC](https://forum.kirupa.com/t/css-with-dynamic-programming/263096 "2008-06-12T15:42:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![NS05](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ns05/32/2205_2.png) [@NS05](https://forum.kirupa.com/u/NS05)\
**Post date:** [June 12, 2008, 3:42pm UTC](https://forum.kirupa.com/t/css-with-dynamic-programming/263096/1 "2008-06-12T15:42:30Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [June 12, 2008, 4:51pm UTC](https://forum.kirupa.com/t/css-with-dynamic-programming/263096/2 "2008-06-12T16:51:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![NS05](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ns05/32/2205_2.png) [@NS05](https://forum.kirupa.com/u/NS05)\
**Post date:** [June 12, 2008, 4:57pm UTC](https://forum.kirupa.com/t/css-with-dynamic-programming/263096/3 "2008-06-12T16:57:31Z")

</div>

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;  
}

---

<div class="post-metadata">

**Author:** ![NS05](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ns05/32/2205_2.png) [@NS05](https://forum.kirupa.com/u/NS05)\
**Post date:** [June 12, 2008, 7:14pm UTC](https://forum.kirupa.com/t/css-with-dynamic-programming/263096/4 "2008-06-12T19:14:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![NS05](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ns05/32/2205_2.png) [@NS05](https://forum.kirupa.com/u/NS05)\
**Post date:** [June 12, 2008, 9:43pm UTC](https://forum.kirupa.com/t/css-with-dynamic-programming/263096/5 "2008-06-12T21:43:58Z")

</div>

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\>