Forums

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

Home › Forums › CSS › 100% width of content with a table that is growing wider than 100%

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 18, 2010 at 10:53 am #30723
    iafiawik
    Member

    Hi all,

    I have run into a CSS issue that I cannot seem to solve myself. The thing is that I have very wide tables in my application, and I do not wish to use any “inline” scrolling (like overflow: scroll;) – I want to use the “regular” scrollbars that are available to the left of the browser window and at the bottom of the window.

    In my sample project I have tried to reproduce this. As you can see, the table here is wide. If you resize the browser window so the horizontal scrollbar appear at the bottom of page and then scroll the horizontal scrollbar all the way to the right, the menu is no longer covering the whole page (as intended with the 100% width styling of the menu).

    I cannot use anything that locks the menu vertically since vertical scrolling is quite common in the application and I want the menu to disappear when scrolling the page down.

    So, to put it straight: how can I make this menu cover the whole page even when scrolling horizontally? I am looking for a solution that works in both IE7 and IE8.

    If anyone has an idea how to solve this, I would be very grateful.


    

    

    
Untitled Page
    

    

    

    

    


    


      

    • Item 1

      • 

    • Item 2

      • 

    • Item 3

      • 


    


    





































    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
    November 19, 2010 at 5:18 am #74344
    sylenix
    Member

    what about making your nav menu stay on top when you scroll vertically or stay centered when you scroll horizontally, this can be done with javascript.

    November 25, 2010 at 4:57 am #72313
    iafiawik
    Member

    Hi sylenix,

    Yes, that could be the solution. Do you know how to do that using Javascript?

    November 25, 2010 at 5:31 am #72299
    sylenix
    Member

    do you want it sticky or floating?

    November 25, 2010 at 5:33 am #72300
    Rob MacKay
    Participant

    For a simple option that might not be the best for you, you could make the menu fixed. this would keep it in the same place relative to the browser window so when you scroll down it would just be there at the top. Unfortunately it would cover some of your data, but you could hide it and slide it out on mouse over or something…

    November 25, 2010 at 6:49 am #72277
    iafiawik
    Member

    sylenix.

    I want the menu to stay centered when I scroll horizontally.

    November 25, 2010 at 8:09 am #72281
    yoboubdir
    Member

    Hi, try this :


    

    

    

    
Untitled Page
    

    

    

    

    

    


    





































    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf

    

    
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
    November 25, 2010 at 8:33 am #72282
    iafiawik
    Member

    yoboubdir,

    Thanks.
    The problem with your solution is that when I scroll vertically, the menu is always visible. I want the menu to be hidden when I scroll downwards.

    Edit: if there’s a way, CSS or Javascript, to make the menu hidden when scrolling downwards, the problem would be solved.

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