Question

I’m developing a web application that in a view has three panels as the image shows:

Which CSS properties would you use to have the bottom panel get the same width as the upper two panels combined in a dynamic context?

EDIT: I’m sorry I should have mentioned that I can’t use any javascript. I need a solution purely executed by CSS. The markup is generated from the java code of which I’m developing the application so I don’t have a direct access to that either.

Answer 1

Learn about display:inline-block;, float, position and other properties for display and positioning options. I just guess there’s something like a wrapper.

HTML:

<div id="wrapper">
    <div id="firstPanel">First panel <br/>width: 300px</div>
    <div id="secondPanel">
         Second panel <br/> width: > 300px, thus min-width:300px;
    </div>
    <div id="thirdPanel">
         Third panel. <br/> width: First panel + second panel + margin(?)
    </div>
</div>

CSS:

#wrapper{
    display:inline-block;
    /* a block element will take all width, so you have to use a specific width,
    a floating or an inline element.*/
}
#wrapper > div{ /* just for convenience */
    border:1px solid #000; 
    border-radius:3px;
    margin:.2em;
}
#firstPanel, #secondPanel{
    /* to show both in the same row. float:left is also possible */
    display:inline-block;
}
#firstPanel{width:300px;}
#secondPanel{min-width:300px;}

/* if you use float:left above, you have to use */
#thirdPanel{clear:both;}

Demo