Question

Here is the master page:

<div id="top">

    <div id="left">
        <!-- menu with 5 items -->
    </div>

    <div id="rigth">
        <!-- menu with 3 items -->
    </div>
    </div>

<div id="title">
    <h1>My MVC Application</h1>
</div>
</div>

And here is my Css:

#left
{
float: left;
margin-left:-100px;
height: 30px;
}

#rigth
{
float: right;       
height: 30px;
right:0px;
margin-right: 0px;
}

#top
{
top: 0px;
left: 100px;    
position: fixed;
width: 95%;
background: url(../../Content/images/myImage.png) no-repeat center center;

}

And everything is fine when by browser window is big. But when I minimize it, the bar enlarges its height and “right” comes below “left”. How to change this?
I want right not to be visible. Kinda like when gmail’s top bar.
The position is fixed because I want the bars to be shown when I scroll.

Answer 1

You’re mixed up ‘px’ and ‘percent’ This is not an issue mostly. But you should try using percent only for positioning elements on the screen