Floating Divs and centering the Div

Question

I have three divs that I would like aligned horizontally and also aligned on the center of the page.

What I have is close to what I want, but its not centered on the page and it doesn't resize with the browser window either.

I'm still new to HTML and CSS so any suggestions will be appreciated.

#wrapper {
  width: 90%;
  min-width: 768px;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

.projectlogo {
  float: left;
  margin: 20px;
  width: 122px;
  height: 113px;
}

.projectsite {
  border-radius: 50%;
  border: solid #DFF0D8;
  float: left;
  margin: 20px;
  width: 126px;
  height: 126px;
}

.description {
  float: left;
  margin: 20px;
  width: 400px;
}

#gallery {
  width: 980px;
  height: 240px;
  font-size: 1.25em;
}

#gallery h2 {
  text-align: center;
}

<div id="wrapper">
  <main>

    <div id="gallery">
      <h2>My Work</h2>

      <img class="projectlogo" src="images/rotary_logo.png" width="122" height="113" alt="" />
      <div class="description">
        <p>Rotary Club of Wilsonville is an ongoing project. They are an active group in their community and plan many events for variuos causes. They needed help keeping the calendar updated and improving some of the content on their site. </p>
      </div>
      <img class="projectsite" src="images/website2.png" width="126" height="126" alt="" />

    </div>
  </main>
</div>

The images won't show up for you readers, but I included the html to give you a better idea of what it is I am trying to accomplish.

I also included the wrapper information because that is what I am setting up the pages with to center everything and give it the pages white space on the left and right sides.

possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Hareesh Sivasubramanian, Aug 23 '15 at 01:56

score 0 · Accepted Answer · answered Aug 23 '15 at 01:08

Here is a solution that centers everything, hopefully this is what you're looking for. To accomplish this, I created a div to wrap around your three divs, and gave it display: inline-block so that it shrinks to fit. Then I gave the parent text-align: center to line the wrapper div center. I also gave your gallery div auto margins on left and right, to center the entire thing. Finally I removed the top margin from your first p element so that the top lines up with the other divs.

Hopefully this is exactly what you were looking for!

Working Live Demo (make sure to click "Full Page" to see it fullscreen):

#wrapper {
    width: 90%;
    min-width: 768px;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
}
.projectlogo {
    float: left;
    margin: 20px;
    width: 122px;
    height: 113px;
}
.projectsite {
    border-radius: 50%;
    border: solid #DFF0D8;
    float: left;
    margin: 20px;
    width: 126px;
    height: 126px;
}
.description {
    float: left;
    margin: 20px;
    width: 400px;
}
.description p:first-child {
    margin-top: 0;
}
#gallery {
    width: 980px;
    height: 240px;
    font-size: 1.25em;
    margin: 0 auto;
}
#gallery h2 {
    text-align: center;
}

#wrap {
    display: inline-block;
}

main {
    text-align: center;
}

<div id="wrapper">
    <main>
        <div id="gallery">
             <h2>My Work</h2>

            <div id="wrap">
                <img class="projectlogo" src="images/rotary_logo.png" width="122" height="113" alt="" />
                <div class="description">
                    <p>Rotary Club of Wilsonville is an ongoing project. They are an active group in their community and plan many events for variuos causes. They needed help keeping the calendar updated and improving some of the content on their site.</p>
                </div>
                <img class="projectsite" src="images/website2.png" width="126" height="126" alt="" />
            </div>
        </div>
    </main>
</div>

JSFiddle Version: https://jsfiddle.net/66jhc0Ld/1/

Floating Divs and centering the Div

1 Answers1