Hi, I'm tying store 2 nested divs one next other, by floating them to left. Both divs are stored in container div, which width is smaller than sum of nested divs width. I want to use horsizontal scrollbar instead of vertical scrollbar. Problem is that divs, are not rendered one next other, but one below other. Current status: panel1 panel2 Wanted status: panel1panel2 Please can you somebody tell me what is wrong in my code, Thanks for any help. Here is my code: <code> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <style> * { margin: 0; padding: 0; } #panecontainer{ border: 1px solid black; width: 410px; height: 200px; overflow-y: hidden; overflow: auto; position: relative; float: left; } #pane1{ float:left; background-color: red; height: 20px; width: 210px; overflow:hidden; } #pane2{ float:left; background-color: blue; height: 20px; width: 210px; overflow:hidden; } </style> </head> <body> <div id="panecontainer"> <div id="pane1">Column 1</div> <div id="pane2">Column 2</div> </div> </body> </html> </code>
#pane2{ float:left; background-color: blue; height: 20px; width: 210px; overflow:hidden; margin-right: -12px; } (not 10px cause IE is acting weird, as usual)
Thanks a lot, it works, but i want to used it for examle for 10 columns with width 200px, so i will need calculate margin, for everyone. It's something like calcutale absolute position of every div. Is there any possibility to do it without calculation ?
one more solution exists, who what can check following link: http://www.sitepoint.com/forums/showthread.php?t=437138