StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFloat:none does not work in my responsive design
text
Body
copied!<p>I'll temporarily open this live URL, otherwise this problem will be too hard to explain:</p> <p>[test URL closed]</p> <p>Please open this in a browser that supports media queries and resize the browser to mobile, at around 400px of viewport width or lower:</p> <p><img src="https://i.stack.imgur.com/WUJoP.png" alt="enter image description here"></p> <p>As you can (should) see, the "Tags" option in the global navigation menu is visible, active and aligned to the right. This works correctly and is accomplished by floating it to the right:</p> <pre><code>.nav-option-active { @include inline-block; float:right; } </code></pre> <p>(note: I'm using SASS, hence the @include syntax)</p> <p>So far, so good. However, as the viewport grows, more room becomes available to show the navigation options, both this active one and additional ones, as they normally should appear. With room available, they should not float. You can see how this work for the other navigation options when you resize the viewport into something larger:</p> <p><img src="https://i.stack.imgur.com/32D0b.png" alt="enter image description here"></p> <p>See above. The global navigation options appear unfloated, as they should, however the active navigation option (which in this case is the tags link) remains floated to the right. All I want to do in larger viewports is to undo that float, so that the link will behave as an inline-block, unfloated, and appear as in the markup just like the other links. My attempt to do so is as follow:</p> <pre><code>.nav-option-active, .nav-option-active a, .nav-option-active a em { float:none; } </code></pre> <p>Note that the code is kind of desperate, it really should be a matter of setting float:none on only the .nav-option-active element.</p> <p>As you can already see from the screenshot, the float is not undone, and I can't figure out why. In Firebug I see that float:none is indeed applied, and that float:right is striked through, overruled by float:none. So the CSS is definitely applied, but it has no effect. Clear:both has not effect either, although I think that isn't the right property to use. Strangely, if in Firebug I actually get rid of the float rules during runtime, the desired behavior is achieved.</p> <p>I have a feeling that I'm overlooking something very basic or misunderstanding something fundamental, so how can I undo a float once set?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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