title: Split Screen into two division using ionic framwork?
body: <p>I have created a demo of weather Application using ionic framework. In this I have using slide menu which contain 4 menu item that is like(My city weather,Forecast,map and Wind&amp; Pressure).On click of forecast menu a tab view is opened in which a list of cities with their weather information is opened(using weather api for with cities code).The data display on list with different column for each city.But this  list opened on full page or screen.</p>
  
  <p>Now I want to open these cities only with in half page from where i can scroll the cities and on half page I want to open a map. I try a lot to do division but not success to do that.check my code as given below and let me know where I am wrong .</p>
  
  <p>Any help will be Appriciated.</p>
  
  <p>here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   auth-signup:
      &lt;ion-header-bar class="bar-positive"&gt;
      &lt;h1 class="title"&gt;ForeCast&lt;/h1&gt;
      &lt;/ion-header-bar&gt;
  
  //class avatar defined in style.css for column item design for Forecast.
      &lt;ion-content&gt; &lt;ion-list&gt; &lt;ion-item
       class="item-avatar" ng-repeat="weather in weatherList"
       href="#/auth/signup/{{weather.id}}" type="item-text-wrap"&gt; 
         &lt;div class="container"&gt;
       &lt;div id="list_div" &gt;
       &lt;div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color:Lime;"&gt;
        &lt;table&gt;
         &lt;tr&gt;
        &lt;th&gt;&lt;img id="img-view"ng-src="http://openweathermap.org/img/w/{{weather.weather[0].icon}}.png"&gt;
        &lt;/th&gt;
        &lt;th&gt;
        &lt;h2&gt;
        &lt;font color="#ffffff" style="text-align: center"&gt;{{weather.name}}&lt;/font&gt;
        &lt;/h2&gt;
        &lt;h2&gt;
        &lt;font color="#ffffff" style="text-align: center"&gt;
             {{weather.main.temp}}°C&lt;/font&gt;
           &lt;/h2&gt;
          &lt;/th&gt;
  
         &lt;/tr&gt;
        &lt;/table&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;/ion-item&gt; &lt;/ion-list&gt; &lt;/ion-content&gt;
  
  // want this class division under under cities list. 
      &lt;div class="map_div"&gt;Map View&lt;/div&gt;
  // style for the image and the text display in list column item.
      &lt;style&gt;
      #img-view {
       display: block;
       margin: -10px;
       width: 40px;
       height: 40px;
       margin-left: auto;
       margin-right: auto;
      }
      .list_div {
       margin-left: -60px;
       margin-right: auto;
      }
      .item-complex .item-content,.item-radio .item-content {
       background: none;
      }
      #rounded-view {
       margin: 5px;
       background: rgba(0, 0, 0, .5);
      }
      .item-avatar {
       margin: 5px;
       background: rgba(0, 0, 0, .5);
      }
      #list_div {
       margin: -5px;
      }
      &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Style.css</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>.item-avatar.top-cont{border:none}
  .item-avatar.top-cont img{float:left; margin-right:10px; vertical-align:top}
  .item-avatar.top-cont h1{color:#fff;}
  
  ul.list_vw{padding:0; margin:0}
  ul.list_vw li{list-style-type:none; float:left; margin-right:10px; padding-bottom:5px; color:#fff; font-size:16px; width:44%}
  
  ul.list_vw.sec_vw{margin-top:10px; display:inline-block}
  
  ul.list_vw.sec_vw li{width:100%}
  
  .scroll-content{
    background-image:url("../img/app_backgroun.jpg");
  }
  
  .transparent {
      background: transparent !important;
  }
   #container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
  
  #list_div {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50%;
    background-color:none;
    text-align:center;
    
  }
       #map_div {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    bottom: 0;
    background-color:green;
    text-align:center;
    color:#FFFFFF;
  }  </code></pre>
  </div>
  </div>
  </p>