Facebook like header – Horizontal scrolling on resizing

[bharathv884]

Hi,

I am stuck with this problem and have queried forums, but the solution that I hear is breaking on resizing.

This is the layout that I have: 1. Header frame at the top of the page 2. Container box at the top right of the header 3. Two text boxes in the top of the container box.

The problem is: When I change the size of the window, the text boxes become in-accessible since there is no horizontal scroll bar.

I see that in facebook, when the window hits the text box, the horizontal bar appears.

Here is the code I have : TEST

Test data

* {
margin: 0px;    
}

#header {
top: 0px;
left: 0px;
width: 100%;
height: 120px;
margin: 0px;
padding: 0px;
position: relative;
background: #eee;
z-index: 1;
}

#containerframe{
position: absolute;
top: 10px;
right: 20px;
width: 300px;
height: 60px;
}
input {
width: 60px;
}

[Paulie_D]

Link does not work

I think you should be looking into using position:fixed on the header is you are trying to replicate FB functionality.

[Author]

Posts