I've looked at several similar questions but have not come up with an answer that quite addresses my specific problem.
I am building a resume document and I have two divs which float side-by-side, left is for headers (Work experience, education, etc), right is for details (company name, duties, etc), and they are vertically aligned on the page.
I would like to know how to marry the vertical alignment of the headers in the left div to the details in the right div. For instance, I have several p's for details of work experience, and I want my next header to vertically align below those in order to sit next to the appropriate p element.
body {
height: 100%;
width: 100%;
background-color: #fffffc;
font-family: Times, serif;
}
.wrapper {
margin: 1em;
padding: 1em;
}
#header {
height: 5em;
width: 90%;
margin: auto auto 0px auto;
;
border-bottom: 4px solid black;
padding: 1em 1em 0 1em;
}
#header_name {
border-bottom: 1px solid #66ccff;
margin-bottom: 2px;
}
#header_contact {
margin: 2px auto auto auto;
padding-top: 2px;
}
.left {
float: left;
margin-right: 2em;
margin-left: 3em;
display: table;
}
.work_left {
display: table-cell;
float: left;
clear: left;
padding-bottom: 400px;
}
.volunteer_left {
display: table-cell;
float: left;
clear: left;
padding-top: 45px;
}
.education_left {
display: table-cell;
float: left;
clear: left;
}
.skills_left {
display: table-cell;
float: left;
clear: left;
}
#work_head {} #volunteer_head {} #education_head {} #skills_head {} .right {
width: 60%;
display: table;
margin-right: 3em;
}
.work_right {
margin-bottom: 2px;
padding-bottom: 2px;
}
h5 {
margin-top: 2px;
padding-top: 2px;
}
.work_def {
text-align: justify;
text-justify: inter-word;
}
#org_name {
float: right;
}
#location {
float: right;
}<div>
<div class="wrapper">
<div id="header">
<h2 id="header_name">First Last
</h3>
<p id="header_contact">555.555.5555 · <a href="mailto:mail@gmail.com">mail@gmail.com</a> · City, State
</p>
</div>
<div id="content">
<div class= "left">
<h3 class="work_left" id="work_head">Work Experience</h3>
<h3 class="volunteer_left" id="volunteer_head">Volunteer Experience</h3>
<h3 class="education_left" id="education_head">Education</h3>
<h3 class="skills_left" id="skills_head">Special Skills</h3>
</div>
<div class="right">
<h4 class="work_right">Job Title <span id="org_name">Company Name</span></h4>
<h5>July 2013 - Present <span id="location">City, State</span></h5>
<p class="work_def">Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p class="volunteer"></p>
<p class="education"></p>
<p class="skills"></p>
</dv>
</div>
<div id="footer">
</div>
</div>
</div>
