CODEWITHSUNDEEP
htmlcss
user3318980
user3318980

Reputation: 39

Overflow x not working

I am trying to create a horizontal scrollable div containing images but not sure why the below code is not working .

Moreover the images in the div are getting displaying vertically instead of horizonatlly. Can anyone ple help me understanding the problem here 

 <div>
     <img  src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
     <img   src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
     <img   src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
 </div>

Below is the css :

div {
    width:400px;
    height:550px;
    border:thin solid black;
    overflow-x:scroll;
    overflow-y:hidden;
    position:relative;
}


img {
    width:350px;
    height:500px;
}

Upvotes: 0

Views: 739

Answers (2)

Kisspa
Kisspa

Reputation: 584

div {
    border: thin solid #FF0000;
    height: 550px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
     width: 400px;
  }
 img {
    height: 500px;
    width: 350px;
}
img:nth-child(2) {
    border: 1px solid #FF0000;
    position: relative;
    right: -358px;
    top: -504px;
}
img:last-child {
    border: 1px solid #FF0000;
    left: 724px;
   position: relative;
   top: -1000px;
 }

image

http://jsfiddle.net/kisspa/99xr7/

Upvotes: 1

Alfred Huang
Alfred Huang

Reputation: 18265

because the display of <img> is display: inline;, you should prevent them breaking the line:

using:

div {
    white-space:nowrap;
}

to do this

demo: http://jsfiddle.net/fish_ball/vrD6E/

Upvotes: 6

Related Questions