I have nested <div> columns inside another <div> container which is set to 57% width of page. The nested div's act as columns which are always 100% height of the container. The columns vary in width up to 100% of container width depending on how many other columns there are. As new columns are added they need to compress to a min of 100px width then overflow with horizontal scroll on the container.
My problem is that as more columns are added the container overfills and the new columns are offset bellow the previous columns instead of horz to the left. How do i keep my columns lined up horizontally and splitting the container width equally. currently i'm using float: left; with clear: none;.
Also do i need JS to keep the container scrolled to the far left as new columns are added or is there a simpler way?
Thanks!
Expand|Select|Wrap|Line Numbers
- div.container{
- position:relative;
- top:0px;
- left:0px;
- height: 100%;
- width: 57%;
- float: left;
- overflow: auto;
- clear: none;
- }
- div.column{
- position:relative;
- top:0px;
- left:0px;
- height: 100%;
- Max-width: 100%;
- Max-width: 100px;
- float: left;
- overflow: auto;
- clear: none;
- }