Centering 2 DIV's side by side on Responsive Layout Options

[Terminator]

I have 2 div's with text in them, I am trying to get the div's centered side by side on a Responsive Layout but cant figure it out.

Here is what my CSS is for the 2 div's:

div.blk1 {
float: left;
margin: 15px;
}

I did float: left in order for them to be side by side, otherwise they are on top of each other.

I was thinking maybe wrap these 2 div's in a container and center the container, but cant use text-align because then it centers the text within the 2 div's.

thanks.

[Frederiek]

You also need to give the DIVs a width.

To center the container, give that a width too and use margin: 0 auto;.

[pandy]

Also see CSS: centering things .

[amitwadhwa]

I would do it this way - http://jsfiddle.net/11dbft28/

[Terminator]

I would do it this way - http://jsfiddle.net/11dbft28/

Thanks for the code. I needed them centered side by side though, blk1 on the left and blk2 on right, then on mobile view they will move on top of each other. I guess I cant use float: left; with the way you coded it can I?

[Frederiek]

Open the result page in a new browser window or tab and you'll see they are side by side. Though they slightly seem to overlap.

But you can use float too. Use that instead of the display: inline-block;. Then, in the media-query, add a float: none;.

Be sure to clear the float too after these DIVs, or use Nicolas Gallagher's micro clearfix, see http://nicolasgallagher.com/micro-clearfix-hack/ .

[Terminator]

Thanks, I got it to work just the way I wanted.

[Frederiek]

Good. You're welcome.