How to use ion-tabs inside a div - html

Question

I am working on ionic1 and angularjs I have already worked with tabs but now I am facing an issues where my tabs should be appear only in a particular div so on the particular area of my html page only my ion-tabs should work but it is not displaying well as we i am expected.
here is my .html page
<ion-modal-view>
<div class="bar bar-header bar-calm">
<button class="button icon ion-navicon"></button>
<h1 class="title">Happy Home</h1>
<button class="button" ng-click="closeLogout()">LogOut</button>
</div>
<ion-content>
<div class = "row responsive-sm" style = "padding-top:50px">
<div class = "col">
<label class="item item-input item-select">
<br>
<select>
<option>B09-301</option>
<option selected>G45-94</option>
<option>R8910</option>
</select>
</label>
</div>
</div>
<div style="background-color: #DEE0E0">
<div class = "row">
<div class = "col-33">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-ios-home item-floating-label" ></i>
MEMBERS
</div>
</div>
</div>
<div class = "col-33">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-model-s item-floating-label"></i>
Vechical
</div>
</div>
</div>
<div class = "col-33">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-ios-bookmarks item-floating-label"></i>
Booking
</div>
</div>
</div>
</div>
<div class ="row">
<div class = "col col-top">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-person-stalker item-floating-label"></i>
Staff
</div>
</div>
</div>
<div class = "col col-top">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-ios-home-outline item-floating-label"></i>
Visitor
</div>
</div>
</div>
</div>
</div>
<div class = "row">
<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<ion-tab title="MyDues">
<ion-content>
<h1>happy home Dues</h1>
</ion-content>
</ion-tab>
<ion-tab title="Deposite">
<ion-content>
<h1>happy home Deposite</h1>
</ion-content>
</ion-tab>
<ion-tab title="Advance">
<ion-content>
<h1>happy home Advance</h1>
</ion-content>
</ion-tab>
<ion-tab title="History">
<ion-content>
<h1>happy home History</h1>
</ion-content>
</ion-tab>
</ion-tabs>
</div>
</ion-content>
Here you can see the ion-tabs where i have implemented the tabs div
and here is the sample image where i should use ion-tabs help me if some one know how to use the ion-tabs for my MY DUES,ADVANCE,DEPOSIT,HISTORY.
THANK YOU,

Answer 1

Put inside of <div> and add this css to this div
width: 100%;
position: fixed;
Working for me

Answer 2

I am working on ionic 3, I got this way, I put the tab inside ion-content and works for me.
<ion-content>
<ion-card>
<ion-row fixed padding>
<ion-col>
<h2 class="card-titulo"> Localidade</h2>
<h2 class="card-titulo"> Data Início</h2>
</ion-col>
<ion-col>
<h2 class="card-descricao">
<ion-icon name="pin"></ion-icon>
Fortaleza-CE
</h2>
<h2 class="card-descricao">
<ion-icon name="calendar"></ion-icon>
24/01/18 10:47
</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label>Clima</ion-label>
<ion-select [(ngModel)]="clima">
<ion-option>Frio</ion-option>
<ion-option>quente</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Equipamento</ion-label>
<ion-select [(ngModel)]="equipamento">
<ion-option>Medidor</ion-option>
<ion-option>Equipament teste</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-card>
<ion-content>
<tabs-obra></tabs-obra>
</ion-content>
<ion-fab bottom right>
<button ion-fab mini (click)="abrirListaAtividade()">
<ion-icon name="checkmark"></ion-icon>
</button>
</ion-fab>