I want to create a x-scrollable panel of specific height and width where DIVs should be positioned in a row to the left insted of to the bottom (see this example: http://jsbin.com/ohahac/1/edit). I want to make this panel scrollable to the left only.what am I missing or doing wrong here?\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML+RDFa 1.1//EN"><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>untitled</title> <meta name="generator" content="TextMate http://macromates.com/"> <meta name="author" content="headkit-studio"> <!-- Date: 2013-03-21 --> <style> *{ margin:0; padding:0; } .blockdiv{ height: 500px; float:left; min-height:400px; } </style> </head> <body> <div id="main" style="overflow:hidden;"> <div class="leftbar" style="width:150px; height: 500px; position: relative; float: left; display: inline; background-color:black;">LEFT</div> <div id="content" style="width:100%"> <div class="section"> <div class="region" style="overflow-x:scroll; width:1200px; border:1px dotted black; height: 500px;"> <div id="01" class="blockdiv" style="background-color:yellow; width:450px">1</div> <div id="01" class="blockdiv" style="background-color:blue; width:690px">2</div> <div id="01" class="blockdiv" style="background-color:silver; width:500px">3</div> </div> </div> </div> </div> </body></html>\[/code\]thnx!!
How to make DIVs flow to the left in a x-scrollable pane with CSS?
- Thread starter GeCe
- Start date