CSS Responsive Content Alignment

Question

I try to redesign my website with device compatibility.

I use this code for min-width768px which means desktop or laptop devices.

    <div style="width:100%;">
    <div style="width:20%; height:60px; margin-top:10px; float:left;">
        <a href="#"><img src="images/logo.png" width="155" height="60" alt="Logo"></a>
    </div>
    <div class="menu" style="width:70%; height:50px; margin-top:25px; font-size:12px; float:left;">
        <ul class="yatay_menu">
        <li>
        <a href="#" title="Anasayfa">/a>
        </li>
        <li>
        <a href="kurumsal.php" title="Hakkımızda"></a>
        </li>
        <li>
        </ul>
    </div>
    <div class="menu" style="width:10%; height:80px; margin-top:20px; float:left;">
        <img src="images/telefon.png" width="147" height="40">
    </div>
    <div class="responsive_menu"><i class="fa fa-bars" style="color:#b0063a; font-size:28px;"></i></div>
    <div style="clear:both;"></div>
</div>

In compatibility version of this code I hide menu and phone number divs. Instead of them until 480px I show another div which is a contains bars icon.

.menu { display:none; }    
.responsive_menu { display:block; width:80%; margin-top:25px; }

What i want is this icon has to align right side of div. However it isn't work. I use float right but it isn't displayed beacause dimension of page. Image is exactly explain the issue.

Answer 1

There are many ways to remedy this.

using divs with percentage widths on devices that scale is asking for problems, especially if there is content overflow on them.

The safest way to do this, is to use absolute positioning for the menu button. Something like this :

#menuButton
{
   position:absolute;
   top:15px;
   right:10px;
}

This makes the element titled 'menuButton' positioned from the right, ensuring it's always on the right side of your view.

Answer 2

Based on your fixed edit: i'd propose just giving your menu icon a position: fixed; when displayed. The draw back is that you'd need the title bar fixed as well....

#menu_icon{
   position: fixed;
   right: 15px;
}

OR you can give the parent containing div width: 100%; and then give the icon absolute right: 15px; like, this is better overall, imo:

.responsive_menu{
    position: relative;
    width: 100%;
}

#menu_icon{
   position: absolute;
   right: 5px;
}

Answer 3

I suggest you to use the most popular HTML, CSS, JS Framework which provides responsive containers applicable for your mobile. http://getbootstrap.com/