title: How to float an infobox right with CSS?
body: <p>I have an infobox on my Jekyll site with the HTML source code:</p>
  
  <pre><code>&lt;table style="width: 1000px; border: 1px; padding: 1em; margin-right: 0px; padding-right: 0px; float:right;"&gt;
    &lt;tbody style="width: 1000px; float:right;"&gt;
      &lt;caption id="table-1" style="text-align: center; font-size: 30px;"&gt;
        {{ include.distro }}
      &lt;/caption&gt;
      &lt;tr class="cyan"&gt;
        &lt;td class="white" colspan="2"&gt;&lt;img src="/images/Logos/{{ include.logo }}" style = "width:100px;"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title2" colspan="2" style="text-align: center;"&gt;Characteristics&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;Category&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.category }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The country this distribution originated from. It may nowadays be developed by people from a variety of different countries."&gt;Country&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.country }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The year that this distribution was official first announced or released"&gt;Date&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.date }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="Who develops this distro? Is it developed by a community or a company?"&gt;Developed by&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.developer }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="Where does the funding for this distribution come from?"&gt;Funded by&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.funding }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The default init system of the latest release of this distribution"&gt;Init system&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.init-system }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The default package manager of the latest release of this distribution"&gt;Package manager&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.package-manager }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The release model of this distribution"&gt;Release model&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.release-model }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title2" colspan="2" style="text-align: center;"&gt;Support&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="Officially supported CPU architectures for all presently supported releases"&gt;Architectures&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.architecture }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="Does this distribution have out-of-the-box support for Broadcom wireless?"&gt;Broadcom&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="{{ include.broadcom }}"&gt;{{ include.broadcom }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="Does this distribution have out-of-the-box support for Filesystem in Userspace?"&gt;FUSE&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="{{ include.fuse }}"&gt;{{ include.fuse }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="Presently supported releases"&gt;Releases&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.releases }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="Does this distribution have out-of-the-box support for UEFI firmware?"&gt;UEFI&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="{{ include.uefi }}"&gt;{{ include.uefi }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title2" colspan="2" style="text-align: center;"&gt;Software&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The latest version of Mozilla Firefox in the official repositories of this distribution"&gt;Firefox&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.firefox }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The latest version of glibc in the official repositories of this distribution"&gt;glibc&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.glibc }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The latest version of GNOME Shell in the official repositories of this distribution"&gt;GNOME&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.gnome }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The latest version of LibreOffice in the official repositories of this distribution"&gt;LibreOffice&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.libreoffice }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The latest version of the Linux kernel in the official repositories of this distribution"&gt;Linux&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.linux }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="green"&gt;
        &lt;td class="title1"&gt;&lt;abbr title="The latest version of the Xorg in the official repositories of this distribution"&gt;Xorg&lt;/abbr&gt;&lt;/td&gt;
        &lt;td class="green"&gt;{{ include.xorg }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  {% include Layouts/clear.html %}
  </code></pre>
  
  <p>where <code>{% include ... %}</code> and <code>{{ include... }}</code> are Liquid tags. <code>Layouts/clear.html</code> is <a href="https://github.com/fusion809/fusion809.github.io/blob/master/_includes/Layouts/clear.html" rel="nofollow noreferrer">here</a>, it is designed to ensure that headings (later in the article) don't overlap with this infobox. This infobox is included in a post with the code:</p>
  
  <pre><code>{% include_relative table.html distro="Arch Linux" logo="ArchLinux.svg" category="Minimalist" country="Canada" date="2002" developer="Community" funding="Donations" init-system="systemd" package-manager="pacman" release-model="Rolling" architecture="arm, i686, x86_64" broadcom="AUR" fuse="Yes" uefi="Yes" firefox="50.1.0" glibc="2.24" gnome="3.22.2+18+gdf7727a" libreoffice="5.2.3" linux="4.8.14" xorg="1.19.0" %}
  </code></pre>
  
  <p>and for some reason it is rendered as:</p>
  
  <p><a href="https://i.stack.imgur.com/Ujp4b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ujp4b.png" alt="enter image description here"></a></p>
  
  <p>note how it is centred even though in the first line of my HTML code (<code>&lt;table style="width: 1000px; border: 1px; padding: 1em; margin-right: 0px; padding-right: 0px; float:right;"&gt;</code>) you can see I had the style <code>float:right;</code>. Examining the code with Chrome's element inspector show's that the <code>&lt;table&gt;</code> has the <code>float</code> display property set to <code>right</code>. Likewise <code>&lt;tbody&gt;</code> also has the <code>float</code> display property set to <code>right</code>. <code>&lt;caption&gt;</code> has the <code>float</code> property set to <code>none</code> and all other subelements of the table like <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> have no <code>float</code> property set. </p>
  
  <p>EDIT: If you want to try out solutions to my fixing issues, merely run (assuming you're running Linux and have rubygems installed):</p>
  
  <pre><code>git clone https://github.com/fusion809/fusion809.github.io # warning this repo is over 70 MB in size!
  cd fusion809.github.io
  sudo gem install bundler
  bundle install
  bundle exec jekyll serve -D --future
  </code></pre>
  
  <p>then open your browser to <a href="http://localhost/comparison-major-linux" rel="nofollow noreferrer">http://localhost/comparison-major-linux</a>, where <code>localhost</code> can be replaced with wherever Jekyll is generating this site locally on your system.</p>