Bootstrap and CSS positioning of a toggle - html

Question

I am a newbie in html programming and hope you will be able to help me without qualifying my question as a 'stupid' one :)
I am using the bootstrap toggle javascript and I am struggling to understand why my elements are overlapping eachother (as shown in the picture below).
I (naively) thought that having a container class 'lorem' would help. It looks like my 'top' property of the lorem class that I set to 50px is simply not considered. What did I make wrong?
I hope my question is legible and will be helpful to other readers.
Thanks for your help.
this is my css file :
#tag_domoos_title{
font-family:Arial;
font-size: 150%;
text-align: left;
position: absolute;
top: 5px;
left: 90px;
color:blue;
z-index:10;
font-weight: 900;
}
#tag_update{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 20px;
left: 90px;
color:blue;
}
#datetime{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 40px;
left: 90px;
color:blue;
}
#tag_sunrise_sunset{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 50px;
left: 10px;
color:black;
}
#tag_weather_temperature{
font-family:Arial;
font-size: 100%;
text-align: right;
position: absolute;
top: 145px;
right: 15px;
color:black;
font-weight: 900;
}
#current_weather_conditions_title{
font-family:Arial;
font-size: 95%;
text-align: left;
position: absolute;
top: 110px;
left: 10px;
color:blue;
font-weight: 900;
}
#current_weather_forecast_title{
font-family:Arial;
font-size: 95%;
text-align: left;
position: absolute;
top: 200px;
left: 10px;
color:blue;
font-weight: 900;
}
#tag_weather_condition{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 130px;
left: 10px;
color:black;
font-weight: 600;
}
#tag_additional_weather_information{
font-family:Arial;
font-size: 90%;
text-align: center;
position: absolute;
top: 150px;
left: 10px;
width: 250px;
color:black;
}
#meteo_icon {
position: absolute;
right: 10px;
top: 100px;
}
#meteo_forecast{
font-family:Arial;
font-size: 100%;
float:left;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
height:434px;
width:870px;
top:200px;
position: relative;
}
#meteo_forecast_day1{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 215px;
left: 10px;
color:black;
font-weight: 600;
}
#meteo_forecast_day2{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 285px;
left: 10px;
color:black;
font-weight: 600;
}
#meteo_forecast_day3{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 355px;
left: 10px;
color:black;
font-weight: 600;
}
#meteo_forecast_temperature_day1{
font-family:Arial;
font-size: 80%;
text-align: right;
position: absolute;
top: 215px;
right: 5px;
color:black;
}
#meteo_forecast_temperature_day2{
font-family:Arial;
font-size: 80%;
text-align: right;
position: absolute;
top: 285px;
right: 5px;
color:black;
}
#meteo_forecast_temperature_day3{
font-family:Arial;
font-size: 80%;
text-align: right;
position: absolute;
top: 355px;
right: 5px;
color:black;
}
#meteo_forecast_condition_day1{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 235px;
left: 10px;
color:black;
}
#meteo_forecast_condition_day2{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 305px;
left: 10px;
color:black;
}
#meteo_forecast_condition_day3{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 375px;
left: 10px;
color:black;
}
#domoos_logo {
position: absolute;
left: 0;
top: 0px;
}
#lorem{
font-family:Arial;
font-size: 100%;
text-align: left;
position: absolute;
top: 50px;
left: 10px;
height: auto;
}
#footer
{
font-family:Arial;
font-size: 40%;
clear: both;
border: 1px groove #aaaaaa;
background: blue;
color: White;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: normal;
margin: 0;
position: fixed;
bottom: 0px;
width: 100%;
}
#hyperlinks_mobile
{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 500px;
left: 10px;
color:black;
}
ul {
background: #bbb;
}
li, [class*="grid"] > * {
background: #ccc;
}
header, footer {
background: #ddd;
}
body {
background-color:#ddd;
}
this is my html code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Domoos mobile</title>
<meta http-equiv="refresh" content="600">
<link rel="stylesheet" type="text/css" href="css/mystyle_mobile.css"/>
<meta http-equiv="pragma" content="no-cache">
<script type="text/javascript" src="scripts/date_time.js"></script>
<script>
// Global variables
var AutoScript = false;
var ValueCheck = -1;
</script>
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="./css/bootstrap-toggle.css" rel="stylesheet">
<link href="./css/style_thermostat.css" rel="stylesheet">
<script src="./js/jquery-2.1.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap-toggle.js"></script>
</head>
<body>
<header class="banner" id="header" role="banner">
<div id="domoos_logo"><img src="assets/icons/logo_Domoos_lab.png" alt="" style="width:75px;height:54px;"></div>
<div id="tag_domoos_title">Domoos mobile</div>
<div id="datetime">
<script type="text/javascript">window.onload = getTimeDate('datetime');</script>
</div>
<div id="tag_sunrise_sunset"><p><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↑ 06:25 ↓ 20:33</p></div>
</header>
<div class="lorem">
<div id="home" class="tab-pane fade in active">
<button class="btn btn-success" onclick="SwitchOnOffAll('on')">Tout allumer</button>
<button class="btn btn-danger" onclick="SwitchOnOffAll('off')">Tout éteindre</button>
</div>
<label>
<span class="label label-primary">chk01 - Chambre 1 [A]</span>
<input id="chk01" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
<label>
<span class="label label-primary">chk02 - Chambre 2 [B]</span>
<input id="chk02" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
<label>
<span class="label label-primary">chk03 - Chambre 3 [N]</span>
<input id="chk03" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
<label>
<span class="label label-primary">chk04 - Salle de bains (Lavabo) [C]</span>
<input id="chk04" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
<label>
<span class="label label-primary">chk05 - Salle de bains (Baignoire) [D]</span>
<input id="chk05" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
<label>
<span class="label label-primary">chk06 - Lumière WC [Z]</span>
<input id="chk06" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="16">
</label>
</div>
<input id="lab01" type="text" name="country" class="resizedTextbox" value="20" readonly>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
</p>
<p>
<input id="lab02" type="text" name="country" class="resizedTextbox" value="20" readonly>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
</p>
<p>
<input id="lab03" type="text" name="country" class="resizedTextbox" value="20" readonly>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
<progress id="prg01" value="10" max="100"></progress>
</p>
<div class="footer" id="footer">Domoos web mobile version 0.0</div>
</body>
</html>