How do I center two divs within a larger div?


Tags: css

Problem :

I am trying to center two divs (#about and #testimonial-snippets) within the larger black div. How can I do this?

JS Fiddle: http://jsfiddle.net/DgtqM/

HTML

<footer>
        <div id="footer-section">
            <section id="about">
                <a href="http://twitter.com" target="_blank"><img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44"></a>
                <p>Lorem ipsum dolor sit amet. Find him on <a href="http://twitter.com" target="_blank">Twitter</a> and <a href="http://instagram.com" target="_blank">Instagram</a>. <a id="slide-toggle" href="#">Contact</a> | <a href="">Archive</a></p>
            </section>
            <section id="testimonial-snippets">
                <a href="http://twitter.com" target="_blank"><img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44"></a>
                <div class="snippet">
                    <p>This is a testimonial.</p>
                    <a class="read-testimonial" href="/testimonials">read more</a>
                </div>
            </section>
        </div>
</footer>

CSS

footer {
background: #222;
clear: both;
color: #f4f3f1;
float: left;
padding: 50px 0;
width: 100%;
}
#footer-section {
margin: 0 auto;
overflow: hidden;
position: relative;
width: 940px;
}
footer section {
float: left;
width: 300px;
}
#about {
margin-right: 20px;
}
footer a {
border-bottom: 1px dotted #f4f3f1;
color: #f4f3f1;
}
.profile-photo {
border: 1px solid #f4f3f1;
float: left;
margin: 4px 10px 10px 0;
}
p {
margin: 0 0 1em;
}


Solution :

Wrap the elements within a new div. Then give the new div a fixed width and use margin: 0px auto for styling.

HTML

<div id="footer-section">
   <div class="wrap">
    <section id="about">
      <!--Content -->
    </section>
    <section id="testimonial-snippets">
      <!--Content-->
    </section>
   </div>
</div>

CSS

.wrap{
    width: 620px;
    margin: 0px auto;
    overflow: auto;
}

Example http://jsfiddle.net/DgtqM/5/


    CSS Howto..

    How to deal with image references in CSS in a Rails 3.1 app

    How to contents of div onclick tab

    how to add border to image css on blogger

    How to make css overlay hidden while having position as absolute

    How to create a Line Item with vertical middle aligned text?

    How to add a gradient/filter in the image in CSS

    How do I return all CSS properties applied to an element by an external stylesheet class (not get computed styles!)?

    How to resize CSS Box with increase in content

    how to place div next to centered div css

    How to make a 2x2 grid of Div's in CSS?

    How to prevent exceeding the parent's boundary?

    How to find CSS deceleration for :hover state using Chrome's inspector

    how do I select second submit button to imply other color

    how to save the datas which are get from a newsletter? [closed]

    How to fake width animation with CSS transform?

    How to apply “!important” from CSS via jQuery? [duplicate]

    How to increase-decrease the number (i.e. 0, 1,4..) size in CSS?

    How to turn off spell checking WebStorm of css?

    How to proportionally fit a variable number fieldsets inside a parent div

    Asp.Net-MVC: How to style <%=Html.ActionLink()%> with Css?

    How to use HTML-CSS on outputting data conditionally?

    White space in between banner image and menu bar on site-only 1080px screen and lower. How to fix? [closed]

    Show and hide table column using jQuery

    How can i get my Jchartfx area graph to show up underneath my gridview?

    How to center banner with jquery mobile?

    how to set two div's height equal with css

    How to fix IE7 float-clear combination

    How to override default CSS in modern GWT applications?

    jQuery: How to check if an element exists and change css property

    How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?