The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Facebook like header – Horizontal scrolling on resizing

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #162324


    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

    * {
    margin: 0px;    
    #header {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 120px;
    margin: 0px;
    padding: 0px;
    position: relative;
    background: #eee;
    z-index: 1;
    position: absolute;
    top: 10px;
    right: 20px;
    width: 300px;
    height: 60px;
    input {
    width: 60px;

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.