Question

I have a simple HTML page which displays 2 lists one besides the other. Each item on the list is a div element (round-corner box) that contains some data. now when I run it from my STS and view it in my browser: lists are displayed one beside the other. When I deploy it to the couldfoundry and view it with my browser the second list is displayed below the 1st one.
Here is my HTML (I appologize on the missing indentation) :

<section title="item List">
    <div class="inner"><h4>ITEMS</h4></div>
    <div class="inner"><h4>OTHERS</h4></div>
    <div style="clear: both"></div>

     <!-- item only list -->
    <div class="container">
    <ul class="plainList">
      <c:forEach items="${itemsFrom.itemsOnly}" var="item" varStatus="status">
        <li><div class="inner">
          <img src="resources/images/${item.id}.png">
          <ul class="plainList">
            <li><h4>${item.title} &trade;</h4></li>
             <li><h5>${item.description}</h5></li>
           </ul>
           <input style="float: right;" type="checkbox" name="itemIds" value="${item.id}" />
          <div style="clear: both"></div>
          </div>
          </li>
        </c:forEach>
     </ul>
    </div>

    <!-- Others only list -->
    <div class="container">
      <ul class="plainList">
     <c:forEach items="${itemsFrom.othersOnly}" var="item" varStatus="status">
       <li><div class="inner">
         <img src="resources/images/${item.id}.png"/>
         <ul class="plainList">
            <li><h4>${item.title} &trade;</h4></li>
            <li><h5>${item.description}</h5></li>
          </ul>
          <input style="float: right;" type="checkbox" name="itemIds" value="${item.id}" />
        <div style="clear: both"></div>
       </div>
       </li>
     </c:forEach>
     </ul>
    </div>
  </section>

and here is the CSS:

body {
    font-size:100%;
    font-family: Comic Sans MS, Georgia, ariel;
}

div.inner  { margin: 0; padding: 10px; border:0; zoom:1; background: #dcdcdc}
div.outer { float: left; margin: 5px; background: #c10506; padding: 8px, width: 26em}


.container {
    margin: 0px;
    padding: 0px;
    float: left
}

ul.plainList {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    float: left
}

Answer 1

HTML rendering doesn’t have to do with Server Side directly. The results generated from the server side can have a influence in what the dynamic portions of your page have to show.
So for instance if you view your page in dev env vs. staging, you’ll see, due to the number of records being more most likely in stage, a difference in your UI.

I would say check your persistence and see if you can have the same exact number of data being sent to your client side from server side on Cloud Foundry as your localhost.

Again remember UI rending doesn’t change just because your application is deployed to a PAAS environment. It’s the Server Side data you have in each environment which is causing your issue. This can simply happen on your localhost as well.