Note that there are some explanatory texts on larger screens.

plurals
  1. POIssue centering a div between two floats
    primarykey
    data
    text
    <p>I found a solution on this site to <strong><a href="https://stackoverflow.com/questions/3172738/centering-a-div-between-one-thats-floated-right-and-one-thats-floated-left">center a div between two floats</a></strong> . The solution works fine except that I have a double border now.</p> <p><strong>CSS</strong></p> <pre><code>.trilink_container { margin:5px; overflow: hidden; /* contain floated elements */ } .trilink_all { border: 1px solid #CCCCCC; color: #444444; text-shadow: 0 1px 1px #F6F6F6; background: #fdfdfd; background: -o-linear-gradient(top, #fdfdfd, #eee); background: -ms-linear-gradient(top, #fdfdfd, #eee); background: -moz-linear-gradient(top, #fdfdfd, #eee); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fdfdfd), color-stop(1, #eee)); background: -webkit-linear-gradient(#fdfdfd, #eee); background: linear-gradient(top, #fdfdfd, #eee); text-align:center; } .trilink_item { float: left; width: 32%; margin-left:5px; } .trilink_right { float: right; width: 32%; margin-right:5px; } .trilink_center { margin-left: auto; margin-right: auto; } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;div class="trilink_container"&gt; &lt;div class="trilink_item trilink_all"&gt;Left Test&lt;/div&gt; &lt;div class="trilink_right trilink_all"&gt;Right Text&lt;/div&gt; &lt;div class="trilink_center trilink_all"&gt;Centre Text&lt;/div&gt; &lt;/div&gt; </code></pre> <p>I've also added the code to <strong><a href="http://jsfiddle.net/UVmhP/" rel="nofollow noreferrer">jfiddle</a></strong>. </p> <p>BTW, I realise my coding is a bit messy and intend to tidy it up once I have a solution :)</p> <p>Any ideas?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload