CODEWITHSUNDEEP
htmlcssresponsive-design
aresnick
aresnick

Reputation: 1635

Why doesn't float within a @media query work as expected?

EDIT: Resolved!

EDIT: Kevin's answer resolves the issue; however, it's not clear to me why the float declaration within the @media query doesn't work. Any thoughts would be appreciated--

I have two data sets which are semantically one, chronological list. On tablets and browsers, I'd like to display these lists as two separate columns. On a phone or smaller screens, I'd like to collapse the two columns into a single column preserving their chronological order. A solution which preserves the chronological ordering of the elements is an ordered list which I style to create the appearance of two columns; e.g. here is a fiddle demonstrating that solution.

Basically, I have an ordered list whose list elements have one of two classes (.left or .right) which cause them to float to the left and right, and I have a set of @media-queries which creates the responsive behavior I want. The issues is that while I can float them left and right, I don't know how to create the vertical flow I want. e.g. in that fiddle, I have a list,

<body>
    <ol>
        <li class='left'>Left 1 <br> Left 1 continued </li>
        <li class='right'>Right 1</li>
        <li class='right'>Right 2</li>
        <li class='left'>Left 2</li>
    </ol>
</body>

which is styled simply,

<style>
    ol {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    @media (min-width: 50em) {
        body {
            width: 50em
        }
        li {
            width: 45%
        }
    }

    @media (max-width: 50em) {
        li {
            width: 100%;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }
    }

    li {
        display: inline-block;
    }

    li.left {
        background-color: blue;
    }

    li.right {
        background-color: red;
    }
</style>

But, with that, the content in the right column appears shifted down--as below: JSFiddle Screenshot

instead of what I actually want, which would look something like this: What I wish the JSFiddle looked like

I know that I can implement this as two separate columns/divs which are re-ordered by JavaScript on a smaller screen, but I was wondering if there was a way which would preserve the semantic aspect of their ordering while avoiding the vertical flow issues here?

Thanks!

Upvotes: 2

Views: 432

Answers (2)

Nico O
Nico O

Reputation: 14102

Here is quite a bit of a different attemp. Maybe it fits your need. http://jsfiddle.net/NicoO/vyMWS/2/

your question is quite confusing, you should have not put the phrases left and right into your image, but: start story 1 + end story 1 etc.

ol
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    -o-column-count: 2;
    column-count: 2;

}

ol li
{
    background-color: blue;
     display: block;
}

ol li:nth-child(2n)
{
    background-color:red;
}

@media (max-width: 50em) {
    ol
    {
       -webkit-column-count: 1;
      -moz-column-count: 1;
      -ms-column-count: 1;
      -o-column-count: 1;
      column-count: 1;  
    }
}

Upvotes: 0

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

your fiddle

The problem is that those elements were not floating elements. Giving them the float property in that particular media query simply doesn't work as you expected. Check now, it should go. Just enlarge the window of the fiddle.

Your new CSS

@media (max-width: 50em) {
    li {
        width: 100%;
    }
}


li.left {
    float:left;
    background-color: blue;
}

li.right {
    float:right;
    background-color: red;
}

Upvotes: 3

Related Questions