Tabbed Navigation - html

Question

I am attempting to recreate a simple tabbed navigation. My issue seems to be that I cannot position the tabs themselves without dragging the content along with it and currently, when I switch between the tabs, the content continues to shift over the left to keep with it's parent tab.
Would someone be able to help me straighten this?
HTML:
<header>
<ul class="tabs">
<li class="tabs-page">
<input type="radio" name="tab" id="personalInformation" checked />
<label for="personalInformation">Personal Information</label>
<div class="content">
<p>Content for Personal Information will go here!</p>
<p>And some more content will go here!</p>
</div>
</li>
</ul>
<li class="tabs-page">
<input type="radio" name="tab" id="teachingQualifications"/>
<label for="teachingQualifications">Teaching Qualifications</label>
<div class="content">
<p>Content for Teaching Qualifications will go here!</p>
<p>And some more content will go here!</p>
</div>
</li>
</ul>
<li class="tabs-page">
<input type="radio" name="tab" id="expensesInformation"/>
<label for="expensesInformation">Personal Expenses</label>
<div class="content">
<p>And some more content will go here!</p>
</div>
</li>
</ul>
</header>
css:
body
{
margin-left: 0;
margin-top: 0;
}
#formStyle10
{
height: 600px;
width: 500px;
background-color: white;
box-shadow: rgb(128, 128, 128) 2px 2px 2px, -2px -2px 2px rgb(128, 128, 128);
border-radius: 10px;
margin: 30px auto;
}
header
{
height: 65px;
width: 500px;
background-color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid;
}
input[name="tab"]
{
display:none;
}
input[name="tab"] ~ .content
{
display:none;
}
input[name="tab"]:checked ~ .content
{
display: block;
}
input[name="tab"]:checked ~ label
{
background: #ccc;
}
.tabs-page
{
list-style: none;
}
.tabs-page > label
{
padding: 5px;
border-top-left-radius: 5px;
height: 35px;
border-top-right-radius: 5px;
border: 1px solid #2795EE;
width: 90px;
text-align: center;
float: left;
list-style: none;
}
.content
{
position: absolute;
top: 200px;
left: 200px;
}

Answer 1

Use
class with name clearfix
.clearfix{
clear:both;
}
place class with div at the middle of content and nav bar
if you have code share here, i will fix it.