CODEWITHSUNDEEP
cssresponsive-designcss-float
user3135147
user3135147

Reputation: 17

Float does't return on it's place. Responsive design

So I have to menus ul's one is not floated (left) and the other is floated to the right. The problem is that the right one does not return on it's origin place after resizing the browser window.

Preview: jsFiddle Image: https://i.sstatic.net/uqX6f.png

HTML:

<div class="wrapper">
<ul class="menu">
    <li>Option1</li>
    <li>Option2</li>
    <li>Option3</li>
</ul>

<ul class="menu right">
    <li>Option4</li>
    <li>Option5</li>
</ul>
</div>

CSS:

.wrapper
{
    width: 100%;
}

.menu
{
    display: inline-block;
}

@media (max-width: 399px)
{
    .menu
    {
        display: block;
    }        
}


@media (min-width: 400px)
{
   .right
    {
        float:right;
    }
}

Upvotes: 0

Views: 161

Answers (2)

Christina
Christina

Reputation: 34652

It works fine on Firefox but in webkit, you need to float that and put a clear on the menu:

http://jsfiddle.net/UTCE6/

.wrapper
{
    width: 100%;
}
.menu
{
    display: inline-block;
}

@media (max-width: 399px)
{
    .menu
    {
        display: block;
        clear:both;
        float:left;
    }        
}


@media (min-width: 400px)
{
    .right
        {
            float:right;
}
}

Upvotes: 1

underscore
underscore

Reputation: 6887

Why you are not using it like simple ?

.wrapper
{
    width: 100%;
}
.left{
    float:left;

}
.right{

    float:right;
}

DEMO

Upvotes: 0

Related Questions