0

I'm trying to get everything centered horizontally but no go.I feel like it's because of the floats but if I remove them then the left_wrap and right_wrap don't sit beside each other.

https://jsfiddle.net/ydt17yvz/

.main_wrap {width:100%;}

.main_wrap_2 { position:relative;margin:0 auto;}

.left_wrap {background-color:#fff;   width: 50%;
max-width: 930px; position:relative;float:left;}

.right_wrap {background-color:#fff;  width: 50%;
max-width: 930px; margin-top:80vh;position:relative;float:left;}
user2252219
  • 835
  • 3
  • 17
  • 41

1 Answers1

1

You should use inline block, putting comment in the center of your 2 block (since else it'll count as a   in your html document and will break the 50% 2 column layout)

Fiddle:

https://jsfiddle.net/dLgej4tx/3/

 .main_wrap {
  width: 100%;
 }

 .main_wrap_2 {
   position: relative;
   margin: 0 auto;
  }

 .left_wrap {
   background-color: #fff;
     display: inline-block;
    width: 50%;
    max-width: 930px;
   position: relative;
   vertical-align: top;
 }

.right_wrap {
   background-color: #fff;
   display: inline-block;
   width: 50%;
   max-width: 930px;
   margin-top: 80vh;
   position: relative;
   text-align: center;
   vertical-align: top;
}

.carousel_wrap {
  width: 92%;
  margin-top: 80vh;
}

.content_wrap {
   margin-top: 0px;
   padding: 0;
   position: relative;
   clear: both;
}

.content {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica LT Std';
  font-size: 12px;
  line-height: 1.5;
  width: 280px;
}

You will see, it'll make all your interaction easier and it will work as expected

Yann Chabot
  • 4,789
  • 3
  • 39
  • 56
  • I found using the flex worked perfectly! `.container { display: flex; justify-content: center; } .center { width: 800px; }` – user2252219 Jan 08 '16 at 22:12
  • 1
    Flex is the best option of course but the support is not good for IE9< :(, if you don't need it it'll fit your needs perfectly – Yann Chabot Jan 08 '16 at 22:14