Div in Div

   

arrow_back
arrow_forward
arrow_upward
SPR
REF
  A B C
1

<style>
#A_0
{ background-color:Lavender; width:80%; padding:10px;}
#A-1{ background-color:khaki; height:100px; margin:25px; line-height:100px; vertical-align:middle;}

#A-2{ height:100px; background-color:wheat; margin:25px; line-height:100px; vertical-align:middle;} </style>
A-1
A-2
div id="A_0">
<div id="A-1"> A-1 </div>
<div id="A-2"> A-2 </div>
</div>
2

<style>
#B-0{
background-color:Lavender; width:80%; padding:10px; overflow:auto;}

#B-1{
background-color:khaki;
height:100px; margin:10px; line-height:100px;
width:60px;
vertical-align:middle;}

#B-2{
background-color:wheat;
height:100px; margin:10px; line-height:100px;
width:60px;
vertical-align:middle;}

#B-3{
background-color:PaleGreen;
height:100px; margin:10px; line-height:100px;
width:60px;
vertical-align:middle;}
</style>
B-1
B-2
B-3
 <div id="B-0">
<div id="B-1" style="float:left">B-1</div>
<div id="B-2" style="float:left">B-2</div>
<div id="B-3" style="float:right">B-3</div>
</div>
2A

#B-0A{
background-color:plum; width:80%; padding:0%; overflow:auto;}

#B-1A{
clear:both;
background-color:khaki;
width:16%;
height:77px;
position:relative;
float:left;
margin-left:0;
}

#B-2A{
clear:both;
background-color:azure;
width:16%;
height:77px;
position:relative;
float:left;
left:50%;
margin-left:-8%;
}

#B-3A{
background-color:royalblue;
width:16%;
height:77px;
position:relative;
float:right;
}
B-1A
B-2A
B-3A
 <div id="B-0A">
<div id="B-1A">B-1A</div>
<div id="B-2A">B-2A</div>
<div id="B-3A">B-3A</div>
</div>
2B

#B-2B{
clear:both;
background-color:red;
width:23%;
height:77px;
position:relative;
float:left;
margin-left:0;
}


/*
#B-2BB{
clear:both;
background-color:azure;
width:16%;
height:77px;
position:relative;
float:left;
left:50%;
margin-left:-8%;
}
*/

#B-3B2{
background-color:OliveDrab;
width:46%;
height:77px;
position:relative;
float:right;
}
</style>
B-2B
B-3B2

<div id="B-0A">


<div id="B-2B">B-2B</div>


<!--
<div id="B-2A">B-2A</div>
-->

<div id="B-3B2">B-3B2</div>
</div>
3 <style>
#C_0
{width:280px;
height:280px;
background-color:tan;
margin:20px auto 20px auto;}

#C_1
{
position:absolute;
margin:40px 40px;
width:200px;
height:200px;
background-color:PaleGreen;
}

#C_2
{
width: 50%;
height: 50%;
top: 25%;
margin: 0 auto;
position: relative;
background:orange;
}
</style>
C_2
 <div id="C_0">
<div id="C_1">
<div id="C_2">C_2</div>
</div>
</div>
4 <style type="text/css">
#D_0
{width:200px; height:200px;
background-color:tan;
margin:10px auto 10px auto;}

#D_1
{
position:relative;
top:0;
margin:10px 10px;
width:120px;
height:120px;
background-color:PaleGreen;
}

#D_2
{
width: 50%; height: 50%;
top:0;
margin: 0 auto;
position: relative;
background:orange;
}
</style>
D_2
 <div id="D_0">
<div id="D_1">
<div id="D_2">D_2</div>
</div>
</div>
5

<style>
#E_0{
background-color:Lavender; width:300; height:300; padding:0;}

#E-1{
background-color:khaki;
height:45px;
line-height:45px;
vertical-align:middle;}

#E-2{
height:210px;
background-color:wheat;
line-height:210px;
vertical-align:middle;}

#E-3{
height:45px;
background-color:tan;
line-height:45px;
vertical-align:middle;}
</style>
E-1
E-2
E-3
<div id="E_0">
<div id="E-1"> E-1 </div>
<div id="E-2"> E-2 </div>
<div id="E-3"> E-3 </div>
</div>


2 Row of 3 divs per row, below

<style>
.row_Grid {
width:60%;
margin: 20px auto 20px auto;
padding:12px;

display: grid; /* (1) a grid container */
grid-auto-flow:column; /* (2) column layout */
justify-content: space-between; /* (3) align the columns*/
background-color: lightyellow;
}
.row_Grid > div { /* All elements in div row_Grid*/
margin:2%;
width: 240px;
height:200px;
border: 2px dashed red;
}
</style>

<div class="row_Grid">
<div class="row_Grid">I am L</div>
<div class="row_Grid"><a href="CSS_Colors.asp">I am C</a></div>
<div class="row_Grid">I am R</div>
</div>

<div class="row_Grid">
<div class="row_Grid">I am L</div>
<div class="row_Grid"><a href="CSS_Colors.asp">I am C</a></div>
<div class="row_Grid">I am R</div>
</div>
I am L
I am C
I am R
I am L
I am C
I am R

Inside Ideal Prepaid

Ideal Prepaid is SA's leading sub-metering solution-provider and installer. From electric prepaid meters to water submeters, we install prepaid-meters in Johannesburg, Pretoria, Cape Town, Durban, Port Elizabeth, East London, Bloemfontein and other areas within South Africa.

Tenants can easily recharge their pre-paid analogue or smart meter at thousands of locations such as: Shell, Caltex, Pick‘n Pay, BP, Checkers and Sasol petrol stations throughout SA. Get a prepaid electricity meter box and avoid landlord-tenant issues. Our energy meters (electricity) or water meters are available in single-phase (1 phase) or three-phase (3 phase) from a variety of manufacturers such as: Landis+Gyr, Elster, Hexing, Genus & Utility Systems.

We are proud to partner with a wide range of organizations on a variety of projects and campaigns. When we work together, we can increase our impact to deliver solution for everyone, everywhere.

 

Our Partners ➔

Benefits

    ✅
    No Outstanding Debts
  • ✅
    No Collection Hassles
  • ✪
    No Credit Problems
  • ✅
    No Administration
  • ✅
    Easy Management
  • ✅
    Auto Arrears Collection
  • ✅
    Risk & Hassle Free
  • ✅
    Continuous Support

Our Users

  • Landlords
  • Body Corporates
  • Municipalities
  • Property Managers
  • Sport Unilities
  • Condominiums and More

Recharge

  • Direct Deposits
  • EFT
  • Credit Card
  • Store
  • Mobile Phone
  • Zapper
  • FlexiPin

Install in Places

  • Houses
  • Apartments
  • Cottages
  • Stores
  • Factories
  • Commercial Units
  • Industrial Units
  • Parking Lots
  • Vacation Rentals

Opportunities

  • Become a Sales Agent
  • Become a Distributor
  • Become a Managing Agent
  • Earn Additional Income
  • Build Life Long Clients

Contractors

  • Participate in New Projects
  • Join Professional Team
  • Register as an Installer
  • Supervise Installations
  • Control Maintenance