Question

okay im making a layout that has two sides. the left is 30% and the right 70%. i have a widescreen monitor so all the images will display how i want them too with good room left. BUT on lower resolutions and the most common 1024×768, the image i made is too big for the left side and goes out of the borders onto the right side.. how would i make the image automatically resize to fit on smaller resolutions?

CSS

#left {
  float:left;
  width:30%;
  height:100%;
  position:fixed;
  padding:20px;
}

#right {
  float:right;
  width:70%;
  height:100%;
  position:absolute;
  padding:40px 20px;
}
#left img {
  ??
}

Answer 1

Try using max-width and a percentage value on the image. This way the image will never exceed that percentage.

For example:

img {
    max-width:90%;
}