creating css template using div - html

Question

I'm trying to cretate temple for all my pages using div tag.
I want my template as
In my layout 'o' is outer container, 'L' is log div, 's' is side menu div and 'c' is content div.I created my template but my problem is my content inside 'content div' is overlaped as send shot.
Hot to get ride of this problem.
.rest {
height: 685px;
padding: 0px 7px;
}
.sidemenu {
float: left;
margin-top: 150px;
width: 100%;
}
.content {
position:relative;
}
.side{
width: 24%;
float: left;
display: inline-block;
}
form[name=profile] p {
padding-left: 20%;
}
hr {
margin: 0;
width: 1px;
height: 660px;
border: 0;
background: #fff;
float: left;
}
h1{
display:inline-block;
text-align:center
margin-left:20px;
margin-right:-40px;
}
.outer {
margin-left: 20%;
margin-top: 3%;
margin-bottom: 3%;
height: 737px;
width: 60%;
box-shadow: 10px 10px 5px #888888;
border: 1px solid #f9f2f2;
border-radius: 10px;
}
button.logout{
display:inline;
float:right;
margin-right:10px;
}
.lout{
float: right;
display: inline-block;
margin-top: 10px;
}
.log {
width:60%;
height: 10%;
position: absolute;
border: 1px solid #f9f2f2;
border-radius: 10px;
display:inline-block;
}
.sidemenu {
float: left;
margin-top: 150px;
width: 100%;
}
.content {
position:relative;
}
<div class="outer">
<div class="log">
<h1>Profile</h1>
<form method="post" class="lout" > <button class="logout" name="logout" >Logout</button></form>
</div> <!--End of log div -->
<div class="rest">
<div class="side">
<div class="sidemenu">
<div class="1 menu">
Profile
</div> <!--End of menu1 -->
<div class="2 menu">
Clients
</div> <!--End of menu 2-->
<div class="3 menu">
Employees
</div> <!--End of menu 3-->
<div class="menu 4">
Documents
</div> <!--End of menu 4-->
</div> <!--End of side menu -->
</div> <!--End of side div -->
<hr>
<!-- <div class="heading" >
<h1>Profile</h1>
</div> End of heading div -->
<div class="content">
<?php
include "config.php";
if($ses!='')
{
$sql="select * from register where id=$ses";
$sql1=mysql_query($sql);
$fet=mysql_fetch_assoc($sql1);
$name=$fet['name'];
$email=$fet['email'];
$phone=$fet['phone'];
$cname=$fet['company_name'];
$street=$fet['street'];
$add=$fet['address'];
$city=$fet['city'];
$state=$fet['state'];
$ein=$fet['ein'];
$id=$fet['id'];
}
?>
<form name="profile" method="post" >
<p>Name<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $name; ?>"</p>
<p>Email<input type="text" size=20 name="mail" maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $email; ?>"</p>
<p>Phone<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $phone; ?>"></p>
<p>Company name<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $cname;?>"></p>
<p>Street<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $street;?>"></p>
<p>Address<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $add; ?>"></p>
<p>City<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $city;?>"></p>
<p>State<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $state; ?>"></p>
<p>EIN<input type="text" size=20 maxlength=50 style="background-color:transparent;border:0px solid white;" readonly value="<?php echo $ein;?>"></p>
<a class="change">Change Password</a><br>
<div class="pass">
<br><input type="password" class="textbox" placeholder="Current Password" name="old" id="old" size="20"/><br><br>
<input type="password" class="textbox" placeholder="New Password" name="new" id="new" size="20"><br>
<br><br><br><br><button class="add" name="go" id="go">Go</button><a style="padding-right:2ex;"></a><a class="change"><button class="add" name="cancel" id="cancel">Cancel</button></a>
</div>
<br>
<div class="tri"><button name="edit" class=add>&nbsp&nbspEdit&nbsp</button><button name="add" class="upload" onclick="admin()">Add New</button></div></form>
</div> <!--End of content -->
</div> <!--End of rest div -->
</div> <!--End of outer div-->

Answer 1

The div with class="log" has "position: absolute;" - Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.
If you want "L" to be absolute positioned you can give a padding-top to the div with class="rest" which to be equal to the class="log" div's height.