vertical align elements within div

Question

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 &middot <a href="mailto:mail@gmail.com">mail@gmail.com</a> &middot 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> 

Answer 1

One solution is to give each "block" its own left and right elements. That way, each block is self-contained: a header on the left and some content on the right. Any content in the block will increase the block's height and push down the next block.

Below, I'm using a "clearfix" method to clear floats after each pair.

 .group:after { content: ""; display: table; clear: both; } div.entry h3 { float: left; width:50%; } div.entry div.content { float: right; width:50%; } 

 <div class="entry group"> <h3>Work Experience</h3> <div class="content"> <h4>Job Title Company Name</h4> <h5>July 2013 - Present City, State</h5> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> <div class="entry group"> <h3>Volunteer Experience</h3> <div class="content"> <p>volunteer</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> <div class="entry group"> <h3>Education</h3> <div class="content"> <p>education</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> <div class="entry group"> <h3>Special Skills</h3> <div class="content"> <p>skills</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> 

Edit:

As mentioned by GCyrillus, you can avoid floating content altogether by using the CSS display property. Below, I'm using display:inline-block .

inline-block : The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)
Source display @ MDN

However, be warned that inline-block will respect (and display) white space between elements. Two adjacent elements with width:50% will not fit in one row and will wrap to the next row (because 50% + 50% + white space > 100%). For this reason, I've adjusted the element widths in my example. Other methods of handling white space can be found below the snippet.

 div.entry h3, div.entry div.content { display:inline-block; width:45%; vertical-align:top; } 

 <div class="entry group"> <h3>Work Experience</h3> <div class="content"> <h4>Job Title Company Name</h4> <h5>July 2013 - Present City, State</h5> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> <div class="entry group"> <h3>Volunteer Experience</h3> <div class="content"> <p>volunteer</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> <div class="entry group"> <h3>Education</h3> <div class="content"> <p>education</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> <div class="entry group"> <h3>Special Skills</h3> <div class="content"> <p>skills</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> 

For more information on handling white space, see:

• CSS Tricks: Fighting the Space Between Inline Block Elements
• StackOverflow: How to remove the space between inline-block elements?

Edit:

Yet another method utilizes CSS display:table , display:table-row , and display:table-cell to display content similarly to an HTML table (but without the possibly non-semantic use of a table for layout purposes ). This is not my favorite method, but it has its applications depending on the context.

 div.container { display: table; } div.entry { display: table-row; } div.entry h3, div.entry div.content { display: table-cell; } div.entry h3 { white-space:nowrap; padding: 0 3em 0 0; } 

 <div class="container"> <div class="entry group"> <h3>Work Experience</h3> <div class="content"> <h4>Job Title Company Name</h4> <h5>July 2013 - Present City, State</h5> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> <div class="entry group"> <h3>Volunteer Experience</h3> <div class="content"> <p>volunteer</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> <div class="entry group"> <h3>Education</h3> <div class="content"> <p>education</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> <div class="entry group"> <h3>Special Skills</h3> <div class="content"> <p>skills</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p> </div> </div> </div> 

Answer 2

Okay first up you've got some markup and readability issues:

Your h* in headers starts as an h2 and ends as an h3 and no one wants that. Also you have one closing div tag misspelled as /dv

Also your code is a little over-reliant on div's, give some html5 markup a shot. You can use header for the header, footer for the footer and main for the content. This makes the code more readable for humans, browsers, and screen readers.

Also, I'd recommend always double spacing and properly indenting your code; it may seem trivial on one page docs like this, but it really pays off down the line to build good habits now. Also it makes helping you out easier.

I went ahead and cleaned up your code; I remember when I first started out it wasn't always obvious where indents should go.

Finally onto your question:

Have you considered just using a table? The layout your describing sounds exactly like a table to me. Bear in mind that just because it's a table doesn't mean it has to have borders, you can style it however you want. I'll include a little example down below.

Cleaned up code:

<head>

    <link type="text/css" rel="stylesheet" href="html resume style.css"/>

    <title>First Last's Resume</title>

</head>

<body>

     <div>

        <div class="wrapper">

            <div id="header">

                <h2 id="header_name">First Last</h3>

                <p id="header_contact">555.555.5555 &middot <a href="mailto:mail@gmail.com">mail@gmail.com</a> &middot 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> <!-- End of Digital Velociraptor? -->

            </div>

            <div id="footer">

            </div>

        </div>

    </div>

and here's an example of a table that might work for you:

    <table id="content">

        <tr>

            <td class="work_left" id="work_head">Work Experience</td>

            <td>I've done all kinds of stuff</td>

        </tr>

            <td class="volunteer_left" id="volunteer_head">Volunteer Experience</td>

            <td>6 months, Stephen Hawking's wheelchair</td>

        </tr>

    </table>

First in each represents the first column, the next being the second.

Good luck!

Answer 3

You can do it by DIVs or Table .....here i have answered using table with full code

  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; } h5 { margin-top: 2px; padding-top: 2px; } #content{ width:1024px; margin:0px auto; } #resume{ width:100%; padding:10px; } #resume td{ padding-bottom:10px; } .header{ width:250px } .work_right { margin-bottom: 2px; padding-bottom: 2px; } h5 { margin-top: 2px; padding-top: 2px; } #org_name { float: right; } #location { float: right; } 

 <div class="wrapper"> <div id="header"> <h2 id="header_name">First Last </h3> <p id="header_contact">555.555.5555 &middot <a href="mailto:mail@gmail.com">mail@gmail.com</a> &middot City, State </p> </div> <div id="content"> <table id="resume"> <tr> <td class="header"><h3><h3></td> <td ><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></td> </tr> <tr> <td class="header"><h3>Work Experience<h3></td> <td>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</td> </tr> <tr> <td class="header"><h3>Volunteer Experience<h3></td> <td>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</td> </tr> <tr> <td class="header"><h3>Education<h3></td> <td>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</td> </tr> <tr> <td class="header"><h3>Special Skills</h3></td> <td>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</td> </tr> </table> </div> <div id="footer"> </div> </div>