How to prevent a fixed div from clipping when resizing the browser window

See more:

CSS

HTML

CSS3

Hi all,

I want to make a fixed toolbar at the top of html page, the problem is that when I re-size the browser's window size, a cutoff appears in the toolbar's content. I want to make the contents inside this toolbar not clipping. Could you please tell me what to do ?

and thanx in advance :)

this is a simple code:

<div class="toolbar">
<div class="toolbar-content">
<div class="user-photo">
user-photo
</div>
<div class="user-name">
user-name
</div>
<div class="user-setting">
user-setting
</div>
</div>
</div>

and this is CSS :

div.toolbar{
position: fixed ;
top: 0;
left: 0;
background-color: #061b34;
z-index: 1;
height: 46px;
width: 100%
}

div.toolbar-content{
position: relative;
height: 46px;
width: 745px;
top: 1px;
margin-left: auto;
margin-right: auto;
}