I try to create a border layout with only header/center/footer. I made following changes to your sample border-layout-markup.html:
so far so good. The layout is as expected.
But as soon as I remove all inner html from center div, the center div shrinks to a small area.
Why the center div does not fill 100% width in this case? I attached my modified html file for your review.
Thanks.
Hi there,
Change your markup to the following:
<div id="layout" style="width:100%; height: 300px; display:block;"> <div class="header">HEADER - some text here</div> <div class="footer">FOOTER - some text here </div> <div class="left"></div> <div class="center"> <h3>CENTER AREA</h3> </div> <div class="right"></div></div>
Also include in the configuration:
leftWidth: "0%", rightWidth: "0%"
Then the layout should work as you expect it.
Thanks for the reply. your suggestion works.
A few observations:
1. these options do not seem to work: showLeft, showRight, showHeader, showFooter.
2. in order to hide header or footer, simply remove the div.
3. in order to hide left or right, set the leftWidth and rightWidth to either 0%, or 0. the div does not need to exist.
(1) if set to 0%, center fills 100% width, which is the original scenario I was trying to achieve.
(2) if set to 0, center is sized to accommodate its content.
case 3 seems to indicate that, setting both left/right to percentage activates a "percentage mode", to enable the center area to fill the rest of the width regardless of its content.
so another issue is, if I set leftWidth and rightWidth to 100, the center area collapses to accommodate its content. how do I set left and right to a fixed width (as opposed to percentage), while still have center area fill the rest?