How to align two divs evenly

Question

I am trying to render a section of my pafe as in this following image. https://i.stack.imgur.com/tx93k.jpg while I am getting it to work fine for smaller screens (using media queires) I am not able to get it for for screen size > 768px. It either makes the 2 boxes overlap or the space on the either sides of the boxes aren't even. Is there a way I can fix it?

<section class="carousel price-carousel"> 
   <div class="container">

      <div class="price-Container">
            <div class="month-column">
                    <h4>Monthly</h4>
                    <p>$9.95</p>
                    <p class=”sub-text”>per computer</p>
            </div>
             <div class="year-column"> 

                    <h4>Yearly</h4>
                    <p>$99</p>
                    <p class=”sub-text”>Save 20% when you pay anually</p>
              </div>
      </div>
</div>  
</section>

JSFiddle: http://jsfiddle.net/d4gyo5s8/

Why use a Carousel ? Do you have more than 2 announcements and want to show 2 at a time ? — Cyril Duchon-Doris, Sep 23 '14 at 18:49
carousel is a just a class name that I am using to bundle up a bunch of fonts that is spread across different sections. I am trying to display what is in the image in my page. — user3861559, Sep 23 '14 at 18:53

Marc Audet · Accepted Answer · 2014-09-23T19:06:39.920

Instead of floats, I would use inline blocks as follows.

.container {
    margin: 0 auto; 
    max-width:1050px;
}

.price-carousel{
    background-color: #eee;
    float:left;
    height:auto;
    margin-top: 10px;
    padding-bottom: 10px;
    width:100%;     
}
.price-Container {
    text-align: center; /* this will center the month and year columns */
}

.price-carousel .month-column{
    background-color: #fff;
    border: 1px solid;
    display: inline-block; /* add this line instead of float */
    height:120px;
    margin-left: 0;
    margin-top:35px;
    text-align: center;
    width:240px;
}
.price-carousel .year-column{
    border: 1px solid;
    background-color: #fff;
    display: inline-block; /* add this line instead of float */
    height:120px;
    margin-left: 30px;
    margin-right: -10%;
    margin-top:35px;
    text-align: center;
    width:240px;
}
.price-carousel .year-column h4, .price-carousel .month-column h4{
    background-color: #676767;
    color: #fff;
    height: 25px;
    margin-top: 0px;
    padding-top:5px;
    width: 100%;
}

<section class="carousel price-carousel">   <!--Price section -->
       <div class="container">
          <div class="price-Container">
                <div class="month-column">
                        <h4>Monthly</h4>
                        <p>$9.95</p>
                        <p class=”sub-text”>per computer</p>
                </div>
                 <div class="year-column"> 
                        <h4>Yearly</h4>
                        <p>$99</p>
                        <p class=”sub-text”>Save 20% when you pay anually</p>
                  </div>
          </div>
    </div>  
  </section>

That works perfectly fine. Thanks.But, when I use media query for smaller screen size, the second is aligned a little towards the top. Is there a way I can fix it? http://jsfiddle.net/d4gyo5s8/7/ — user3861559, Sep 23 '14 at 19:40
For small screens, you apply a width of 30% to the two columns. This forces the right column text to wrap to a 2nd line, which increases the height, hence the offset. You can fix this by either making the columns wider or adding `vertical-align: bottom` to each of the two column CSS rules. You can add it to the general CSS, not the media query version. See: http://jsfiddle.net/audetwebdesign/d4gyo5s8/8/ — Marc Audet, Sep 23 '14 at 21:54

score 2 · Answer 2 · answered Sep 23 '14 at 18:58

I'll just post an updated version of the JSFiddle

Basically I removed the float :left|right and I added the CSS display: inline-block so that your two announcements indeed act as inline-blocks. As you have text-align : center then the blocks will automatically center on the screen. Feel free to add some margin if you want to increase the space between them.

score 1 · Answer 3 · answered Sep 23 '14 at 18:58

http://jsfiddle.net/um0nyna3/

HTML:

<div class="wrapper">
    <div class="leftcol">
        test
    </div>
    <div class="rightcol">
        test
    </div>
</div>

CSS:

.wrapper {
    width: 500px;
    margin: 0 auto;
}
.leftcol {
    float: left;
    width: 49%;
    background-color: lightblue;
    margin-right: .5%;
    margin-left: .5%;
}
.rightcol {
    float: left;
    width: 49%;
    background-color: lightgreen;
    margin-right: .5%;
    margin-left: .5%;
}

Heres a good base for you to start off with.

Basically to get it even for a responsive site you need to set all widths in percentages. Any padding/margin on left or right also need to be percentages. Test this out. I didn't add any media queries as this should give you a good base.

How to align two divs evenly

3 Answers3