Author: dmaliarevich
Date: 2009-06-16 11:06:11 -0400 (Tue, 16 Jun 2009)
New Revision: 15994
Modified:
trunk/jsf/plugins/org.jboss.tools.jsf.vpe.richfaces/src/org/jboss/tools/jsf/vpe/richfaces/template/RichFacesLayoutTemplate.java
trunk/jsf/tests/org.jboss.tools.jsf.vpe.richfaces.test/resources/richFacesTest/WebContent/pages/components/page/pageWithLayout.xhtml.xml
trunk/jsf/tests/org.jboss.tools.jsf.vpe.richfaces.test/resources/richFacesTest/WebContent/pages/components/page/pageWithNestedLayouts.xhtml.xml
Log:
https://jira.jboss.org/jira/browse/JBIDE-4439, logic for width attribute processing was
added to tich:layout template, tests were updated.
Modified:
trunk/jsf/plugins/org.jboss.tools.jsf.vpe.richfaces/src/org/jboss/tools/jsf/vpe/richfaces/template/RichFacesLayoutTemplate.java
===================================================================
---
trunk/jsf/plugins/org.jboss.tools.jsf.vpe.richfaces/src/org/jboss/tools/jsf/vpe/richfaces/template/RichFacesLayoutTemplate.java 2009-06-16
14:51:13 UTC (rev 15993)
+++
trunk/jsf/plugins/org.jboss.tools.jsf.vpe.richfaces/src/org/jboss/tools/jsf/vpe/richfaces/template/RichFacesLayoutTemplate.java 2009-06-16
15:06:11 UTC (rev 15994)
@@ -1,5 +1,6 @@
package org.jboss.tools.jsf.vpe.richfaces.template;
+import java.math.BigDecimal;
import java.util.HashMap;
import java.util.Map;
@@ -58,6 +59,13 @@
NodeList children = sourceNode.getChildNodes();
Map<String, Element> panels = new HashMap<String, Element>();
+ /*
+ * Array of columns weights
+ * 0 - for left panel
+ * 1 - for center panel
+ * 2 - for right panel
+ */
+ String[] widthStrings = {Constants.EMPTY, Constants.EMPTY, Constants.EMPTY};
for (int i = 0; i < children.getLength(); i++) {
Node node = children.item(i);
if (node instanceof Element && node.getNodeName() != null
@@ -68,16 +76,21 @@
* Adding several panel with the same position is forbidden.
* During adding to the map only the last panel
* with repeating position name will be displayed.
+ * Counting columns quantity and reading 'width attribute'
+ * at the same time.
*/
if (ComponentUtil.isNotBlank(position)) {
if (RichFaces.VALUE_TOP.equalsIgnoreCase(position)) {
panels.put(RichFaces.VALUE_TOP, element);
} else if (RichFaces.VALUE_LEFT.equalsIgnoreCase(position)) {
panels.put(RichFaces.VALUE_LEFT, element);
+ widthStrings[0] = element.getAttribute(HTML.ATTR_WIDTH);
} else if (RichFaces.VALUE_CENTER.equalsIgnoreCase(position)) {
panels.put(RichFaces.VALUE_CENTER, element);
+ widthStrings[1] = element.getAttribute(HTML.ATTR_WIDTH);
} else if (RichFaces.VALUE_RIGHT.equalsIgnoreCase(position)) {
panels.put(RichFaces.VALUE_RIGHT, element);
+ widthStrings[2] = element.getAttribute(HTML.ATTR_WIDTH);
} else if (RichFaces.VALUE_BOTTOM.equalsIgnoreCase(position)) {
panels.put(RichFaces.VALUE_BOTTOM, element);
}
@@ -86,63 +99,181 @@
}
/*
- * Adding panels' divs.
- * Order is important!
+ * Columns weights processing:
+ * 1) If column has no weight specified
+ * a) it should have a percent weight - when other weights are less than 100%
summary,
+ * if there are some columns without weight - they should share
+ * total free weight between each other equally.
+ * b) if other columns has weights specified in percents
+ * and in summary it's more than 100%
+ * than no weight should be set.
+ * 2) If there are some columns has weight in '%' and their weights'
+ * sum is more or less 100% then new weight should be set in range of 100%
+ * in proportion to specified weights.
+ * 3) If column has weight set in '%' and the value is greater than 100%
+ * the value is added to style without changes.
+ * 4) Weights in 'px' and 'em' are set in style without changes.
*/
- int columsCount = 0;
- if (null != panels.get(RichFaces.VALUE_LEFT)) {
- columsCount++;
+
+ /*
+ * Array of columns weights
+ * 0 - for left panel
+ * 1 - for center panel
+ * 2 - for right panel
+ */
+ double[] widths = {-1, -1, -1};
+ for (int i = 0; i < widthStrings.length; i++) {
+ widths[i] = parseWidthFromPercents(widthStrings[i]);
}
- if (null != panels.get(RichFaces.VALUE_CENTER)) {
- columsCount++;
+ /*
+ * A) Find any >100% weight.
+ * Leave it as is.
+ */
+ boolean widthOverflow = false;
+ for (double w : widths) {
+ if (w > 100) {
+ widthOverflow = true;
+ }
}
- if (null != panels.get(RichFaces.VALUE_RIGHT)) {
- columsCount++;
+ if (!widthOverflow){
+ /*
+ * B) When weights are less than 100
+ * Count total weight in '%' (<100 || >100)
+ */
+ double totalWidth = 0;
+ for (double w : widths) {
+ if (w > 0) {
+ totalWidth += w;
+ }
+ }
+ /*
+ * Count columns with no width specified.
+ */
+ int noWeightColumns = 0;
+ for (String ws : widthStrings) {
+ if ((null == ws)
+ || Constants.EMPTY.equalsIgnoreCase(ws)) {
+ noWeightColumns++;
+ }
+ }
+ /*
+ * Free width to add to total width to 100.
+ */
+ double totalFreeWidth = 100 - totalWidth;
+ /*
+ * Total available width should always be less or equal 100.
+ */
+ double availableWidth = 100;
+ if ((totalWidth < 100) && (noWeightColumns > 0)){
+ /*
+ * Set specified width, free space will be filled
+ * with columns without width attribute.
+ */
+ availableWidth = totalWidth;
+ }
+ /*
+ * C) Adjust existed weights in '%'
+ */
+ double[] coeffs = {-1, -1, -1};
+ for (int i = 0; i < widths.length; i++) {
+ if (widths[i] > 0) {
+ coeffs[i] = widths[i] / totalWidth;
+ BigDecimal b = new BigDecimal(availableWidth*coeffs[i]).setScale(2,
+ BigDecimal.ROUND_HALF_UP);
+ widthStrings[i] = b.doubleValue() + Constants.PERCENT;
+ }
+ }
+
+ /*
+ * D) Adjust empty weight
+ * When there is some free space to adjust -
+ * divide it equally between width free columns.
+ */
+ if ((totalFreeWidth > 0) && (noWeightColumns > 0)) {
+ BigDecimal b = new BigDecimal(totalFreeWidth/noWeightColumns).setScale(2,
+ BigDecimal.ROUND_HALF_UP);
+ for (int i = 0; i < widthStrings.length; i++) {
+ if ((null == widthStrings[i])
+ || Constants.EMPTY.equalsIgnoreCase(widthStrings[i])) {
+ widthStrings[i] = b.doubleValue() + Constants.PERCENT;
+ }
+ }
+ }
}
+ /*
+ * E) Leave 'px' and 'em' without changes
+ */
+
+ /*
+ * Adding panels' divs.
+ * Order is important!
+ */
addPanelFromMap(RichFaces.VALUE_TOP, panels, mainDiv, topDiv,
- Constants.EMPTY, columsCount, creationData);
+ Constants.EMPTY, null, creationData);
addPanelFromMap(RichFaces.VALUE_LEFT, panels, mainDiv, leftDiv,
- FLOAT_LEFT_STYLE, columsCount, creationData);
+ FLOAT_LEFT_STYLE, widthStrings[0], creationData);
addPanelFromMap(RichFaces.VALUE_CENTER, panels, mainDiv, centerDiv,
- FLOAT_LEFT_STYLE, columsCount, creationData);
+ FLOAT_LEFT_STYLE, widthStrings[1], creationData);
addPanelFromMap(RichFaces.VALUE_RIGHT, panels, mainDiv, rightDiv,
- FLOAT_RIGHT_STYLE, columsCount, creationData);
+ FLOAT_RIGHT_STYLE, widthStrings[2], creationData);
addPanelFromMap(RichFaces.VALUE_BOTTOM, panels, mainDiv, bottomDiv,
- Constants.EMPTY, columsCount, creationData);
+ Constants.EMPTY, null, creationData);
+
return creationData;
}
+ /**
+ * Parse width string from percents form to a number.
+ * @param widthStr panel's width string
+ * @return panel's width number or -1 when parsing failed
+ */
+ private double parseWidthFromPercents(String widthStr) {
+ double result = -1;
+ if ((null != widthStr) && widthStr.endsWith(Constants.PERCENT)) {
+ try {
+ result = Double.parseDouble(widthStr.substring(0, widthStr.length()-1));
+ } catch (Exception e) {
+ /*
+ * Cannot parse - skip.
+ */
+ }
+ }
+ return result;
+ }
+
+ /**
+ * Adds rich:layoutPanel to current rich:layout.
+ * Styles and width will be set.
+ * Panel will be added to children info.
+ *
+ * @param panelPositionMapName panel name, also used to get the panel from the map
+ * @param panelsMap map with panels elements from source
+ * @param mainDiv rich:layout's div
+ * @param panelDiv div to render layoutPanel
+ * @param style panel's css style
+ * @param panelWidth panel's width
+ * @param creationData VpeCreationData
+ */
private void addPanelFromMap(String panelPositionMapName, Map<String, Element>
panelsMap,
- nsIDOMElement mainDiv, nsIDOMElement panelDiv, String style, int columsCount,
VpeCreationData creationData) {
+ nsIDOMElement mainDiv, nsIDOMElement panelDiv, String style, String panelWidth,
VpeCreationData creationData) {
Element panel = panelsMap.get(panelPositionMapName);
if (null != panel) {
String widthStr = panel.getAttribute(HTML.ATTR_WIDTH);
- double width = 100;
- switch (columsCount) {
- case 0:
- width = 100;
- break;
- case 1:
- width = 100;
- break;
- case 2:
- width = 50;
- break;
- case 3:
- width = 32.34;
- break;
-
- default:
- break;
- }
/*
* Apply column width for left, center and right panels only.
- * Top and bottom panels should always be 100% width.
*/
if (!RichFaces.VALUE_TOP.equalsIgnoreCase(panelPositionMapName)
- && !RichFaces.VALUE_BOTTOM.equalsIgnoreCase(panelPositionMapName)) {
- style += "; width: " + width + "%;"; //$NON-NLS-1$ //$NON-NLS-2$
+ && !RichFaces.VALUE_BOTTOM.equalsIgnoreCase(panelPositionMapName)
+ && (null != panelWidth)) {
+ style += "; width: " + panelWidth + ";"; //$NON-NLS-1$
//$NON-NLS-2$
+ } else {
+
}
+ /*
+ * Set the original width to 'width' attribute
+ * as richfaces do.
+ */
+
if (ComponentUtil.isNotBlank(widthStr)) {
panelDiv.setAttribute(HTML.ATTR_WIDTH, widthStr);
}
Modified:
trunk/jsf/tests/org.jboss.tools.jsf.vpe.richfaces.test/resources/richFacesTest/WebContent/pages/components/page/pageWithLayout.xhtml.xml
===================================================================
---
trunk/jsf/tests/org.jboss.tools.jsf.vpe.richfaces.test/resources/richFacesTest/WebContent/pages/components/page/pageWithLayout.xhtml.xml 2009-06-16
14:51:13 UTC (rev 15993)
+++
trunk/jsf/tests/org.jboss.tools.jsf.vpe.richfaces.test/resources/richFacesTest/WebContent/pages/components/page/pageWithLayout.xhtml.xml 2009-06-16
15:06:11 UTC (rev 15994)
@@ -1,5 +1,4 @@
<tests>
-
<test id="id1">
<DIV CLASS="rich-page styleClass" STYLE="width: 1000px;
background-color: white;">
@@ -7,157 +6,157 @@
<DIV CLASS="rich-page-header-content">
<SPAN STYLE="font-size: 2em;">
HEADER
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV CLASS="rich-page-subheader subheaderClass">
<SPAN STYLE="font-size: 2em;">
SUBHEADER
- </SPAN>
+</SPAN>
</DIV>
<DIV CLASS="rich-page-content">
<DIV CLASS="rich-page-sidebar sidebarClass" STYLE="width: 15em;
float: right;">
<SPAN STYLE="font-size: 2em;">
SIDEBAR
- </SPAN>
+</SPAN>
</DIV>
<DIV CLASS="rich-page-main" STYLE="float: left; margin-right:
-30em;">
<DIV CLASS="rich-page-body bodyClass" STYLE="margin-right:
15em;">
<H1 STYLE="-moz-user-modify: read-write;">
<SPAN CLASS="vpe-text">
BODY START
- </SPAN>
+</SPAN>
</H1>
<DIV STYLE="border: 1px solid black;">
<DIV WIDTH="100%" STYLE="">
<DIV>
<SPAN CLASS="vpe-text">
TOP PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="15%" STYLE="float: left; width: 32.34%;">
+ <DIV WIDTH="15%" STYLE="float: left; width: 15%;">
<DIV>
<SPAN CLASS="vpe-text">
LEFT PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="75%" STYLE="float: left; width: 32.34%;">
+ <DIV WIDTH="75%" STYLE="float: left; width: 75%;">
<DIV>
- <SPAN STYLE="font-size: 2em;" >
+ <SPAN STYLE="font-size: 2em;">
CENTER PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="10%" STYLE="float: right; width: 32.34%;">
+ <DIV WIDTH="10%" STYLE="float: right; width: 10%;">
<DIV>
<SPAN CLASS="vpe-text">
RIGHT PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV STYLE="">
<DIV
STYLE="display: block; height: 0pt; clear: both; visibility:
hidden;">
.
- </DIV>
+</DIV>
<DIV>
<SPAN CLASS="vpe-text">
BOTTOM PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>
<H1 STYLE="-moz-user-modify: read-write;">
<SPAN CLASS="vpe-text">
SECOND PART
- </SPAN>
+</SPAN>
</H1>
<DIV STYLE="border: 1px solid black;">
<DIV WIDTH="100%" STYLE="">
<DIV>
<SPAN CLASS="vpe-text">
TOP PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="25%" STYLE="float: left; width: 32.34%;">
+ <DIV WIDTH="25%" STYLE="float: left; width: 25%;">
<DIV>
<SPAN CLASS="vpe-text">
LEFT PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="35%" STYLE="float: left; width: 32.34%;">
+ <DIV WIDTH="35%" STYLE="float: left; width: 35%;">
<DIV>
<SPAN STYLE="font-size: 2em;">
CENTER PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV STYLE="float: right; width: 32.34%;">
+ <DIV STYLE="float: right; width: 40%;">
<DIV>
<SPAN CLASS="vpe-text">
RIGHT PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV WIDTH="100%" STYLE="">
<DIV
STYLE="display: block; height: 0pt; clear: both; visibility:
hidden;">
.
- </DIV>
+</DIV>
<DIV>
<SPAN CLASS="vpe-text">
BOTTOM PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>
<H1 STYLE="-moz-user-modify: read-write;">
<SPAN CLASS="vpe-text">
THIRD PART
- </SPAN>
+</SPAN>
</H1>
<DIV STYLE="border: 1px solid black;">
<DIV WIDTH="100%" STYLE="">
<DIV>
<SPAN CLASS="vpe-text">
TOP PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV STYLE="float: left; width: 32.34%;">
+ <DIV STYLE="float: left; width: 17.5%;">
<DIV>
<SPAN CLASS="vpe-text">
LEFT PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="65%" STYLE="float: left; width: 32.34%;">
- <DIV>
+ <DIV WIDTH="65%" STYLE="float: left; width: 65%;">
+ <DIV >
<SPAN STYLE="font-size: 2em;">
CENTER PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV STYLE="float: right; width: 32.34%;">
+ <DIV STYLE="float: right; width: 17.5%;">
<DIV>
<SPAN CLASS="vpe-text">
RIGHT PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV WIDTH="100%" STYLE="">
<DIV
STYLE="display: block; height: 0pt; clear: both; visibility:
hidden;">
.
- </DIV>
+</DIV>
<DIV>
<SPAN CLASS="vpe-text">
BOTTOM PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>
@@ -166,53 +165,53 @@
</DIV>
<DIV CLASS="rich-page-footer footerClass">
<DIV CLASS="rich-page-footer-content">
- <SPAN STYLE="font-size: 2em;" >
+ <SPAN STYLE="font-size: 2em;">
FOOTER
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>
-
</test>
<test id="id2">
+
<DIV STYLE="border: 1px solid black;" >
<DIV WIDTH="100%" STYLE="">
<DIV>
<SPAN CLASS="vpe-text">
TOP PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="15%" STYLE="float: left; width: 32.34%;">
+ <DIV WIDTH="15%" STYLE="float: left; width: 15%;">
<DIV>
<SPAN CLASS="vpe-text">
LEFT PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="75%" STYLE="float: left; width: 32.34%;">
+ <DIV WIDTH="75%" STYLE="float: left; width: 75%;">
<DIV>
- <SPAN STYLE="font-size: 2em;" >
+ <SPAN STYLE="font-size: 2em;">
CENTER PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="10%" STYLE="float: right; width: 32.34%;">
+ <DIV WIDTH="10%" STYLE="float: right; width: 10%;">
<DIV>
<SPAN CLASS="vpe-text">
RIGHT PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV STYLE="">
<DIV STYLE="display: block; height: 0pt; clear: both; visibility:
hidden;">
.
- </DIV>
+</DIV>
<DIV>
<SPAN CLASS="vpe-text">
BOTTOM PANEL
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>
Modified:
trunk/jsf/tests/org.jboss.tools.jsf.vpe.richfaces.test/resources/richFacesTest/WebContent/pages/components/page/pageWithNestedLayouts.xhtml.xml
===================================================================
---
trunk/jsf/tests/org.jboss.tools.jsf.vpe.richfaces.test/resources/richFacesTest/WebContent/pages/components/page/pageWithNestedLayouts.xhtml.xml 2009-06-16
14:51:13 UTC (rev 15993)
+++
trunk/jsf/tests/org.jboss.tools.jsf.vpe.richfaces.test/resources/richFacesTest/WebContent/pages/components/page/pageWithNestedLayouts.xhtml.xml 2009-06-16
15:06:11 UTC (rev 15994)
@@ -6,151 +6,151 @@
<DIV CLASS="rich-page-header-content">
<SPAN STYLE="font-size: 2em;">
HEADER
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV CLASS="rich-page-subheader">
<SPAN STYLE="font-size: 2em;">
SUBHEADER
- </SPAN>
+</SPAN>
</DIV>
<DIV CLASS="rich-page-content">
<DIV CLASS="rich-page-sidebar" STYLE="width: 15em; float:
right;">
<SPAN STYLE="font-size: 2em;">
SIDEBAR
- </SPAN>
+</SPAN>
</DIV>
<DIV CLASS="rich-page-main" STYLE="float: left; margin-right:
-30em;">
<DIV CLASS="rich-page-body" STYLE="margin-right: 15em;">
<H1 STYLE="-moz-user-modify: read-write;">
<SPAN CLASS="vpe-text">
BODY START
- </SPAN>
+</SPAN>
</H1>
<DIV STYLE="border: 1px solid black; background-color: lime;">
<DIV WIDTH="80em" STYLE="">
- <DIV >
+ <DIV>
<SPAN CLASS="vpe-text">
TOP PANEL 11111
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="40%" STYLE="float: left; width: 32.34%;">
+ <DIV WIDTH="40%" STYLE="float: left; width: 36.36%;">
<DIV>
<SPAN CLASS="vpe-text">
LEFT PANEL 11111
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="30%" STYLE="float: left; width: 32.34%;">
+ <DIV WIDTH="30%" STYLE="float: left; width: 27.27%;">
<DIV>
<H1 STYLE="-moz-user-modify: read-write;">
<SPAN CLASS="vpe-text">
CENTER PANEL 11111
- </SPAN>
+</SPAN>
</H1>
<!-- FIRST NESTED LAYOUT -->
- <DIV STYLE="border: 1px solid black; background-color: green;"
>
+ <DIV STYLE="border: 1px solid black; background-color: green;">
<DIV WIDTH="100%" STYLE="">
<DIV>
<SPAN CLASS="vpe-text">
TOP PANEL 222222
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="15%" STYLE="float: left; width:
32.34%;">
- <DIV >
+ <DIV WIDTH="15%" STYLE="float: left; width: 15%;">
+ <DIV>
<SPAN CLASS="vpe-text">
LEFT PANEL 222222
- </SPAN>
+</SPAN>
<!-- SECOND NESTED LAYOUT -->
<DIV STYLE="border: 1px solid black; background-color:
aqua;">
<DIV WIDTH="100%" STYLE="">
<DIV>
<SPAN CLASS="vpe-text">
TOP PANEL 33333
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="15%" STYLE="float: left; width:
32.34%;">
+ <DIV WIDTH="15%" STYLE="float: left; width:
15%;">
<DIV>
<SPAN CLASS="vpe-text">
LEFT PANEL 33333
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="75%" STYLE="float: left; width:
32.34%;">
+ <DIV WIDTH="75%" STYLE="float: left; width:
75%;">
<DIV>
<SPAN STYLE="font-size: 2em;">
CENTER PANEL 33333
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="10%" STYLE="float: right; width:
32.34%;">
+ <DIV WIDTH="10%" STYLE="float: right; width:
10%;">
<DIV>
<SPAN CLASS="vpe-text">
RIGHT PANEL 33333
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV WIDTH="100%" STYLE="">
<DIV
STYLE="display: block; height: 0pt; clear: both; visibility:
hidden;">
.
- </DIV>
+</DIV>
<DIV>
<SPAN CLASS="vpe-text">
BOTTOM PANEL 33333
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
- <DIV WIDTH="75%" STYLE="float: left; width:
32.34%;">
- <DIV >
- <SPAN STYLE="font-size: 2em;" >
+ <DIV WIDTH="75%" STYLE="float: left; width: 75%;">
+ <DIV>
+ <SPAN STYLE="font-size: 2em;">
CENTER PANEL 222222
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="10%" STYLE="float: right; width:
32.34%;">
+ <DIV WIDTH="10%" STYLE="float: right; width: 10%;">
<DIV>
<SPAN CLASS="vpe-text">
RIGHT PANEL 222222
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV WIDTH="100%" STYLE="">
<DIV
STYLE="display: block; height: 0pt; clear: both; visibility:
hidden;">
.
- </DIV>
+</DIV>
<DIV>
<SPAN CLASS="vpe-text">
BOTTOM PANEL 222222
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
- <DIV WIDTH="40%" STYLE="float: right; width: 32.34%;">
+ <DIV WIDTH="40%" STYLE="float: right; width: 36.36%;">
<DIV>
<SPAN CLASS="vpe-text">
RIGHT PANEL 11111
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV WIDTH="300" STYLE="">
<DIV
STYLE="display: block; height: 0pt; clear: both; visibility:
hidden;">
.
- </DIV>
+</DIV>
<DIV>
<SPAN CLASS="vpe-text">
BOTTOM PANEL 11111
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>
@@ -161,7 +161,7 @@
<DIV CLASS="rich-page-footer-content">
<SPAN STYLE="font-size: 2em;">
FOOTER
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>
@@ -172,89 +172,89 @@
<H1 STYLE="-moz-user-modify: read-write;">
<SPAN CLASS="vpe-text">
CENTER PANEL 11111
- </SPAN>
+</SPAN>
</H1>
<!-- FIRST NESTED LAYOUT -->
- <DIV STYLE="border: 1px solid black; background-color: green;" >
+ <DIV STYLE="border: 1px solid black; background-color: green;">
<DIV WIDTH="100%" STYLE="">
<DIV>
<SPAN CLASS="vpe-text">
TOP PANEL 222222
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="15%" STYLE="float: left; width: 32.34%;">
- <DIV >
+ <DIV WIDTH="15%" STYLE="float: left; width: 15%;">
+ <DIV>
<SPAN CLASS="vpe-text">
LEFT PANEL 222222
- </SPAN>
+</SPAN>
<!-- SECOND NESTED LAYOUT -->
<DIV STYLE="border: 1px solid black; background-color: aqua;">
<DIV WIDTH="100%" STYLE="">
<DIV>
<SPAN CLASS="vpe-text">
TOP PANEL 33333
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="15%" STYLE="float: left; width: 32.34%;">
+ <DIV WIDTH="15%" STYLE="float: left; width: 15%;">
<DIV>
<SPAN CLASS="vpe-text">
LEFT PANEL 33333
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="75%" STYLE="float: left; width: 32.34%;">
+ <DIV WIDTH="75%" STYLE="float: left; width: 75%;">
<DIV>
<SPAN STYLE="font-size: 2em;">
CENTER PANEL 33333
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="10%" STYLE="float: right; width: 32.34%;">
+ <DIV WIDTH="10%" STYLE="float: right; width: 10%;">
<DIV>
<SPAN CLASS="vpe-text">
RIGHT PANEL 33333
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV WIDTH="100%" STYLE="">
<DIV
STYLE="display: block; height: 0pt; clear: both; visibility:
hidden;">
.
- </DIV>
+</DIV>
<DIV>
<SPAN CLASS="vpe-text">
BOTTOM PANEL 33333
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
- <DIV WIDTH="75%" STYLE="float: left; width: 32.34%;">
- <DIV >
- <SPAN STYLE="font-size: 2em;" >
+ <DIV WIDTH="75%" STYLE="float: left; width: 75%;">
+ <DIV>
+ <SPAN STYLE="font-size: 2em;">
CENTER PANEL 222222
- </SPAN>
+</SPAN>
</DIV>
</DIV>
- <DIV WIDTH="10%" STYLE="float: right; width: 32.34%;">
+ <DIV WIDTH="10%" STYLE="float: right; width: 10%;">
<DIV>
<SPAN CLASS="vpe-text">
RIGHT PANEL 222222
- </SPAN>
+</SPAN>
</DIV>
</DIV>
<DIV WIDTH="100%" STYLE="">
<DIV
STYLE="display: block; height: 0pt; clear: both; visibility:
hidden;">
.
- </DIV>
+</DIV>
<DIV>
<SPAN CLASS="vpe-text">
BOTTOM PANEL 222222
- </SPAN>
+</SPAN>
</DIV>
</DIV>
</DIV>