How Do You Center Float?

Question

I have three h3 tags within a div tag. I'm trying to place all three h3 tags on the same horizontal line, with the first h3 tag being left aligned, the second h3 tag being centered, and the third h3 tag being right aligned. I have looked for an answer on here and found many, but have not been able to implement them correctly. Thanks

Here is the HTML5 code

<div class="education">                         
    <h3 class="date"> April 2013 – Present</h3> 
    <h3 class="place"> Sutton ON, Canada </h3> 
    <h3 class="company" > All Reasons Party Rentals </h3>
</div>

And the corresponding CSS3

h3.date {
    text-align:left; 
    display:inline-block; 
    float:left;
}   
h3.company {
    text-align:center; 
    display:inline-block; 
    margin-left: auto; 
    margin-right: auto; 
}   
h3.place {
    text-align:right; 
    display:inline-block; 
    float:right;
}

Answer 1

It looks like you had the h3.company and h3.place selectors the wrong way round with their properties, so the layout was fighting with the order of the HTML.

But, I think this will work:

.education h3 {float:left;padding:0;margin:0;width:33.333%;}

h3.date {text-align:left;}
h3.place {text-align:center;}
h3.company {text-align:right;}

Working here, with coloured backgrounds on the headings so you can see exactly what the widths are: http://jsfiddle.net/QfAeA/

A run down of how this works:

• All 3 headings are floated and given the same width, a third of the available space, so they share it equally
• The padding and margin has been set to 0 so it doesn't make them wider than 33.333% and ruin the layout
• Then you only have to deal with the text alignment for each heading

Hope this helps.

Answer 2

I would use text-align:center on the container, body in this case, and float the two on the outside. This allows for any (or varying) width of any of the elements while remaining perfectly aligned. On small screens it turns into a vertical layout to fit

body { text-align:center; }
h3.date {
    text-align:left; 
    float:left;
}   
h3.company {
    margin:20px auto;
    display:inline-block;
}   
h3.place {
    text-align:right; 
    float:right;
}

Demo

If you want the company name to remain on top of the others on small screens, position it ahead of the floats in the HTML

Answer 3

Please see the code

HTML

 <div class="container">
    <div class="tabletContainer">


        <div class="left">
            <h3>April 2013 – Present</h3>
        </div>
        <div class="middle">
            <h3>All Reasons Party Rentals</h3> 
        </div>

    </div>
    <div class="right">
        <h3>Sutton ON, Canada </h3>
    </div>
</div>

and

CSS

   /* reset browser styles */
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }

    body {
        line-height: 1.2;
    }

    ol {
        padding-left: 1.4em;
        list-style: decimal;
    }

    ul {
        padding-left: 1.4em;
        list-style: square;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    /* end reset browser styles */

    /*Fill all available spaces*/

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

    }


    .container {
        width: auto;
    }

        .container:after {
            content: " ";
            clear: both;
            display: table;
        }


    .tabletContainer {
        /*The total width for the first two column*/
        width: 67%;
        float: left;
        display: block;
    }



    .left {

        float: left;
        /*Each column takes have of the container size, so their width =67/2 = 33.5%*/
        width: 50%;
    }

    .middle {

        float: right;
        /*Each column takes have of the container size, so their width =67/2 = 33.5%*/
        width: 50%;
    }

    .right {
        float: right;
        width: 33%;

    }

    .right h3 {
        float: right;
    }

    /*For tablet devices, show only the two columns in a row and a column underneath*/

    @media (min-width: 481px) and (max-width: 768px) {
        .tabletContainer, .right {
            float: none;
            width: auto;
        }

      .right
      {
          clear: both;
          width: 50%;


      }

        .right h3 {
            float: left;
        }
    }


    /*For mobile phones, show only one column*/
    @media (max-width: 480px) {
       .tabletContainer, .left, .right, .middle {
            float: none;
            width: auto;
           display: block;
        }
        .right h3 {
            float: left;
        }



    }

JSFiddle:

http://jsfiddle.net/KxryX/

EDIT: OK as Jason and Zach suggested that the original solution was not responsive. I have updated to make it responsive.