Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Apr 28th, 2012  |  syntax: None  |  size: 1.92 KB  |  hits: 16  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Grid layout with css?
  2. #outerPanel{
  3.  width:100%;
  4.  float:right;
  5.  position:relative;
  6.   }
  7.  
  8. #rightcol{
  9.  width:35%;
  10.  float:right;
  11.  position:relative;
  12.  }
  13.  
  14. #maincol{
  15.  float: left;
  16.  position: relative;
  17.  width:65%;
  18.  }
  19.        
  20. <p:panel id="outerPanel">
  21.  
  22.             <h:panelGroup id="maincol">
  23.                 <ui:include src="table1.xhtml" />
  24.             </h:panelGroup>
  25.             <h:panelGroup id="rightcol">
  26.                 <ui:include src="input1.xhtml" />
  27.             </h:panelGroup>
  28.  
  29.             <h:panelGroup id="maincol">
  30.                 <ui:include src="table2.xhtml" />
  31.             </h:panelGroup>
  32.             <h:panelGroup id="rightcol">
  33.                 <ui:include src="input2.xhtml" />
  34.             </h:panelGroup>
  35.  
  36.  
  37.     </p:panel>
  38.        
  39. <h:panelGroup styleClass="maincol">
  40.     ...
  41. </h:panelGroup>
  42. <h:panelGroup styleClass="rightcol">
  43.     ...
  44. </h:panelGroup>
  45.  
  46. <h:panelGroup styleClass="maincol">
  47.     ...
  48. </h:panelGroup>
  49. <h:panelGroup styleClass="rightcol">
  50.     ...
  51. </h:panelGroup>
  52.        
  53. .container { width: 100% }
  54. .left { width: 49%; float: left }
  55. .right { width: 49%; float: left }
  56. .clear { clear: both }
  57.        
  58. <html>
  59. <head>
  60.     <title>DIVS</title>
  61. </head>
  62. <body>
  63.     <div class="container">
  64.         <div class="left">Some Content</div>
  65.         <div class="right">Some Content</div>
  66.         <div class="clear"></div>
  67.     </div>
  68. </body>
  69. </html>
  70.        
  71. <div class="row">
  72.     <h:panelGroup styleClass="maincol">
  73.         <ui:include src="table1.xhtml" />
  74.     </h:panelGroup>
  75.     <h:panelGroup styleClass="rightcol">
  76.         <ui:include src="input1.xhtml" />
  77.     </h:panelGroup>
  78. </div>
  79.        
  80. #outerPanel{
  81.     width:100%;
  82.     float:right;
  83.     margin: auto; /*if you want to center out the content*/
  84.     /*position:relative;*/ /*what do you want to use relative for?*/
  85. }
  86.  
  87. .col {
  88.     float: left;
  89.     clear: both;
  90. }
  91.  
  92. .rightcol{
  93.     width:35%;
  94.     float:right;
  95.     /*position:relative;*/
  96. }
  97.  
  98. .maincol{
  99.     float: left;
  100.     /*position: relative;*/
  101.     width:65%;
  102. }
create a new version of this paste RAW Paste Data