Note that there are some explanatory texts on larger screens.

plurals
  1. POFloat Right CSS issues
    primarykey
    data
    text
    <p>I am trying to get my col-md-3 div to float left. Currently with the CSS pasted below it floats right just lovely. When I view the page in Chrome and use developer tools and change the float from "left" to "right" it does it properly. Since I just want the one class to float on the left. I had tried to have it sit outside of the rest and call "float:right;" on just that one like so:</p> <pre><code>.col-md-3{ float:right; } </code></pre> <p>But when I try that it does not float left like it did when I changed that element using the chrome developer tools. Is there something I am overlooking? Below is my current CSS that has it properly floating right, just not left.</p> <pre><code>@media (min-width: 992px) { .container { max-width: 970px; } .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 { float: left; } .col-md-1 { width: 8.333333333333332%; } .col-md-2 { width: 16.666666666666664%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333333333%; } .col-md-5 { width: 41.66666666666667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.333333333333336%; } .col-md-8 { width: 66.66666666666666%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333333333334%; } .col-md-11 { width: 91.66666666666666%; } .col-md-12 { width: 100%; } .col-md-push-0 { left: auto; } .col-md-push-1 { left: 8.333333333333332%; } .col-md-push-2 { left: 16.666666666666664%; } .col-md-push-3 { left: 25%; } .col-md-push-4 { left: 33.33333333333333%; } .col-md-push-5 { left: 41.66666666666667%; } .col-md-push-6 { left: 50%; } .col-md-push-7 { left: 58.333333333333336%; } .col-md-push-8 { left: 66.66666666666666%; } .col-md-push-9 { left: 75%; } .col-md-push-10 { left: 83.33333333333334%; } .col-md-push-11 { left: 91.66666666666666%; } .col-md-pull-0 { right: auto; } .col-md-pull-1 { right: 8.333333333333332%; } .col-md-pull-2 { right: 16.666666666666664%; } .col-md-pull-3 { right: 25%; } .col-md-pull-4 { right: 33.33333333333333%; } .col-md-pull-5 { right: 41.66666666666667%; } .col-md-pull-6 { right: 50%; } .col-md-pull-7 { right: 58.333333333333336%; } .col-md-pull-8 { right: 66.66666666666666%; } .col-md-pull-9 { right: 75%; } .col-md-pull-10 { right: 83.33333333333334%; } .col-md-pull-11 { right: 91.66666666666666%; } .col-md-offset-0 { margin-left: 0; } .col-md-offset-1 { margin-left: 8.333333333333332%; } .col-md-offset-2 { margin-left: 16.666666666666664%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.33333333333333%; } .col-md-offset-5 { margin-left: 41.66666666666667%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-7 { margin-left: 58.333333333333336%; } .col-md-offset-8 { margin-left: 66.66666666666666%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-10 { margin-left: 83.33333333333334%; } .col-md-offset-11 { margin-left: 91.66666666666666%; } } </code></pre>
    singulars
    1. This table or related slice is empty.
    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