how to increase the left div size within the right div in css.

Question

I want to increase the left size along with the right div. But left div didn't behave as i want to be. What is the solution.

I keep the code right here bellow:

    <div id="bn-container">
        <div id="bn-leftside">
            <jdoc:include type="modules" name="left" style="xhtml" />
        </div>
        <div id="bn-rightside">
            <div id="bn-component" style="float:left;">
                <?php if($this->countModules('breadcrumb')) { ?>
                    <jdoc:include type="modules" name="breadcrumb" style="xhtml" />
                <?php } else { ?>
                    <div id="moduletable_space"></div>
                <?php } ?>
                <jdoc:include type="component" />
                <jdoc:include type="modules" name="inset" />
            </div>
            <div id="bn-rightmodule" style="float:right;">
                <jdoc:include type="modules" name="right" style="xhtml" />
            </div>
            <div style="clear:both;"></div>
        </div>
        <div style="clear:both;"></div>
    </div>

And the CSS:

#bn-leftside{
    width:225px;
    background:#3e5955;
    float:left;
    position:relative;
height:auto;
}

#bn-rightside{
    width:780px;
    background:#FFF;
    float:right;
    position:relative;
    height:auto;
}

Answer 1

The code you provided is a dynamic joomla code. you should provide html from rendered page's view source.

I'm giving my opinion if I'm judging your question right

Both column are separate height of both div depends on content inside div if we do not give fixed height.

Here are some method to achieve equal height code : http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/ choose what suit you.