CSS: Placing side by side

Recently my friends (a.k.a my customers) and I decided to change the theme as the vintage theme (Ferado) wasn’t really that suitable for the image they are going with their products. Hence we switched to the free WooCommerce theme Storefront.

The problem I was working on today is trying to place the div containing “© HiFridays 2015” and the logos of the payment methods we accept on the same row like this:

Initially each of them are of full browser width and stacked on top of each other and the use of width: 50% does not help. Googling for help brought me to this guy Lalit Kumar’s webpage on this topic and it works like wonder. I never thought it would be as simple as adding the float property to their CSS which, as Lalit Kumar said, force the div to not have full 100% width.

So now my CSS for these two look like this below and viola! It works. 😉

.site-info {
float: left;
}
.payment-info {
float: right;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s