Images wont display inline

HTML & CSS
1

Hi from 8 degress c York UK…

on this page i cant get the right hand side thumbnail pics to sit inline, instead they stack under each other, here is the offending page:http://www.davidclick.com/portfolio-fix4.html

The thumbnail images should look like this -
http://www.davidclick.com/york-pavilion-hotel-wedding-st-marys-haxby-ring-vision.htm

Now before i posted this i did check the images were set to display inline, they are as the code below shows, i suspect an inheritance problem…

#aside ul {
  margin: 0 0 10px 0;
  padding: 0;
  float: left;
  text-align: center;
  background-color: #fff;
  line-height: 1em;
  list-style: none; 
  position: relative;
  
}


#aside ul li {
  display: inline;
  margin: 0;
  padding: 0;
}

#aside ul a {
  display: block;
  float: left;
  margin: 0 10px 10px 0;
  padding: 4px 4px 6px 4px;
  border: 0;
  background-color: #fff;
  text-align: center;
  width: 80px;
}

#aside ul a:hover {
  background-color: #CDCC00;
  border: 0;
}

Any insights welcome :slight_smile:

2

Try adding this:

#aside ul {
  margin: 0 0 10px 0;
  padding: 0;
  float: left;
  text-align: center;
  background-color: #fff;
  line-height: 1em;
  list-style: none; 
  position: relative;
  [COLOR="Red"]width:200px;[/COLOR]
}
3

Thanks Ralph you fixed it!

4

Glad that helped. :slight_smile: (I’m not totally sure why the width was needed, but I guess if the container and its content are floated, there’s nothing to stop them wrapping like that. I need to understand the finer points of CSS better.)

5

I usually don’t use a width for the UL but have the< li’s> floated! So far without the problems of wrapping!