Reputation: 51
I have this two column layout, made with display: table and display: table-cell, and I want to put in the second column a div with horizontal scroll, but the table expands itself and the scroll goes to the entire page rather then the div.
HTML
<div class="wrapper">
<div id="one"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis finibus metus. Suspendisse commodo rutrum sapien, eu faucibus metus. Nunc elementum augue eu aliquet condimentum.
</div>
<div id="two">
<div id="horizontal">
<img src="https://dl.dropbox.com/u/1218282/slideshow/1.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/2.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/3.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/4.jpg" />
</div>
</div>
</div>
CSS
.wrapper {
display: table;
table-layout: fixed;
}
#one {
display: table-cell;
background-color: gray;
width: 200px;
}
#two {
display: table-cell;
width: 100%;
}
#horizontal {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
#horizontal img {
max-width: 200px;
}
Here is the jsfiddle: http://jsfiddle.net/cUCvY/2597/
In this example I'd like to have the horizontal scroll active on the div with the images inside and not on the page.
Upvotes: 1
Views: 1249
Reputation: 1779
Hope i understood correctly:
.wrapper {
display: table;
table-layout: fixed;
width:100%
}
#one {
display: table-cell;
background-color: gray;
width: 200px;
}
#two {
}
#horizontal {
overflow-x: scroll;
white-space: nowrap;
}
#horizontal img {
max-width: 200px;
}
}
@media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
}
}
http://jsfiddle.net/cUCvY/2600/
Upvotes: 1