{"id":1970,"date":"2012-11-06T16:27:50","date_gmt":"2012-11-06T16:27:50","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/11\/06\/side-by-side\/"},"modified":"2021-11-19T01:58:04","modified_gmt":"2021-11-19T06:58:04","slug":"side-by-side","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/","title":{"rendered":"How to show Joomla 3.1 banners side by side"},"content":{"rendered":"

As we dive deeper into another tutorial about using banners in Joomla<\/a>, we will now teach you how to show your banners side by side.<\/p>\n

By default, banners are shown in div tags, which by default are block elements. Our goal in this tutorial is to turn them into inline elements instead. Does this CSS jargon not make sense? That\u2019s OK, simply follow the steps below to show your banners horizontally instead of vertically.<\/p>\n

    \n
  1. Log into your Joomla 3.0 admin dashboard<\/a><\/li>\n
  2. In the top menu, click Extensions<\/strong> and then click Template Manage<\/strong>r<\/li>\n
  3. In the left menu, click Templates<\/strong><\/li>\n
  4. Next to the template you are using, click the Details and Files<\/strong> link<\/li>\n
  5. Edit your template\u2019s CSS file<\/strong>\n

    In our testing, we are using the Protostar template<\/a>, so we clicked on the link that says Edit css\/template.css<\/strong>. If you are using a different template, your css file may be named differently.<\/p>\n

    When your template\u2019s css file is open, add the following code to the bottom and then click the Save <\/strong>button in the top left: <\/p>\n

    .banneritem,
    .banneritem .clr{
       display: inline;
    }<\/pre>\n
    When you visit your site again, you will notice that your banners are now showing side by side.<\/p>\n\n\n\n\n
    Default Banner Display<\/th>\nBanners side by side after CSS update<\/th>\n<\/tr>\n
    \"default-banner-display\"<\/a>\n
    <\/div>\n<\/td>\n
    		\u00a0\"banners-showing-side-by-side\"<\/a>\n
    <\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    As we dive deeper into another tutorial about using banners in Joomla, we will now teach you how to show your banners side by side. By default, banners are shown in div tags, which by default are block elements. Our goal in this tutorial is to turn them into inline elements instead. Does this CSS Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4403,94],"tags":[4404],"class_list":["post-1970","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-3","tag-joomla-v3"],"acf":[],"yoast_head":"\nHow to show Joomla 3.1 banners side by side | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"The default behavior for banners is to show one on top of the other. In this Joomla 3.0 tutorial, we will show you how to display banners side by side.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to show Joomla 3.1 banners side by side | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"The default behavior for banners is to show one on top of the other. In this Joomla 3.0 tutorial, we will show you how to display banners side by side.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-06T16:27:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-19T06:58:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/11\/edu_joomla-3_banners_default-banner-display.jpg\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"How to show Joomla 3.1 banners side by side\",\"datePublished\":\"2012-11-06T16:27:50+00:00\",\"dateModified\":\"2021-11-19T06:58:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/\"},\"wordCount\":213,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/11\/edu_joomla-3_banners_default-banner-display.jpg\",\"keywords\":[\"Joomla v3\"],\"articleSection\":[\"Joomla\",\"Joomla 3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/\",\"name\":\"How to show Joomla 3.1 banners side by side | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/11\/edu_joomla-3_banners_default-banner-display.jpg\",\"datePublished\":\"2012-11-06T16:27:50+00:00\",\"dateModified\":\"2021-11-19T06:58:04+00:00\",\"description\":\"The default behavior for banners is to show one on top of the other. In this Joomla 3.0 tutorial, we will show you how to display banners side by side.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/11\/edu_joomla-3_banners_default-banner-display.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/11\/edu_joomla-3_banners_default-banner-display.jpg\",\"width\":800,\"height\":445,\"caption\":\"default-banner-display\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to show Joomla 3.1 banners side by side\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to show Joomla 3.1 banners side by side | InMotion Hosting","description":"The default behavior for banners is to show one on top of the other. In this Joomla 3.0 tutorial, we will show you how to display banners side by side.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/","og_locale":"en_US","og_type":"article","og_title":"How to show Joomla 3.1 banners side by side | InMotion Hosting","og_description":"The default behavior for banners is to show one on top of the other. In this Joomla 3.0 tutorial, we will show you how to display banners side by side.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-11-06T16:27:50+00:00","article_modified_time":"2021-11-19T06:58:04+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/11\/edu_joomla-3_banners_default-banner-display.jpg","type":"","width":"","height":""}],"author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"How to show Joomla 3.1 banners side by side","datePublished":"2012-11-06T16:27:50+00:00","dateModified":"2021-11-19T06:58:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/"},"wordCount":213,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/11\/edu_joomla-3_banners_default-banner-display.jpg","keywords":["Joomla v3"],"articleSection":["Joomla","Joomla 3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/","name":"How to show Joomla 3.1 banners side by side | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/11\/edu_joomla-3_banners_default-banner-display.jpg","datePublished":"2012-11-06T16:27:50+00:00","dateModified":"2021-11-19T06:58:04+00:00","description":"The default behavior for banners is to show one on top of the other. In this Joomla 3.0 tutorial, we will show you how to display banners side by side.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/11\/edu_joomla-3_banners_default-banner-display.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/11\/edu_joomla-3_banners_default-banner-display.jpg","width":800,"height":445,"caption":"default-banner-display"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/side-by-side\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to show Joomla 3.1 banners side by side"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=1970"}],"version-history":[{"count":4,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1970\/revisions"}],"predecessor-version":[{"id":92079,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1970\/revisions\/92079"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}