html - Custom layout for portlet containers -

html - Custom layout for portlet containers -

i'm creating custom layout websphere portal theme. i'd have 2 rows, each row having 2 portlet containers beside eachother, each occupying 50% of screen width. when portlets added containers i'd them follow column order. experience layouts in websphere portal?

<div class="hiddenwidgetsdiv"> <!-- widgets in container hidden in ui default --> <div class="component-container hiddenwidgetscontainer ibmdndrow wpthemecol12of12 wpthemefull" name="ibmhiddenwidgets"></div> <div style="clear:both"></div> </div> <div class="wpthemerow"> <div> <div class="component-container wpthemecol ibmdndcolumn wpthemecol6of12" name="headline1"></div> </div> <div> <div class="component-container wpthemecol ibmdndcolumn wpthemecol6of12" name="headline2"></div> </div> </div> <div class="wpthemerow"> <div> <div class="component-container wpthemecol ibmdndcolumn wpthemecol6of12" name="headline3"></div> </div> <div> <div class="component-container wpthemecol ibmdndcolumn wpthemecol6of12" name="headline4"></div> </div> </div>

but markup results in layout, looks odd ..

this went in end ..

<style> .container { width: 100%; height: auto; margin: 0 auto; padding-top: 35px; position: relative; } .gridblock, .gridblock2 { width: 49%; height: 200px; padding: 0px; position: relative; display: inline-block; overflow: hidden; } .gridblock { margin: 2px; } .gridblock2 { margin: 3px, 0; float: right; } </style> <div class="hiddenwidgetsdiv"> <!-- widgets in container hidden in ui default --> <div class="component-container hiddenwidgetscontainer ibmdndrow wpthemecol12of12 wpthemefull" name="ibmhiddenwidgets"></div> <div style="clear:both"></div> </div> <div class="component-container wpthemerow ibmdndrow" name="headline"></div> <div class="container"> <div class="component-container wpthemecol ibmdndcolumn gridblock" name="secondary"></div> <div class="component-container wpthemecol ibmdndcolumn gridblock2" name="ibmmaincontainer"></div> <div class="component-container wpthemecol ibmdndcolumn gridblock" name="secondary2"></div> <div class="component-container wpthemecol ibmdndcolumn gridblock2" name="ibmmaincontainer2"></div> </div>

html css websphere-portal