0

I'm trying to get three images to display evenly and stay evenly placed when the browser is resized. At the moment the images just pile up one on top of the other as you make the window smaller.

I'd like the images to stop once they hit the other image. I think I'm getting there but am a little stuck.

Could someone check my code and see where I'm going wrong or if I'm doing anything wrong in my HTML/CSS layout?

Thanks for your time.

Here is my HTML:

<title>Welcome</title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<body>

<div id="outer">
<div id="header">

</div>


<div class="wrapper">

 <img class="one" src="images/music.jpg" alt="My Music" title="Music" />

 <img class="two" src="images/photos.jpg" alt="My Photography" title="Photography" />

 <img class="three" src="images/about.jpg" alt="About me" title="About" />


</div>

<div id="footer">
</div>
</div>
</body>
</html>




CSS:

body {
background-image:url('images/bgcolour.jpg');
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer {
width: 100%;
background-color:#000000;

}
div#header {
background-position: center top;
height: 30px;   
margin: 0px;
text-align: center;
}



.wrapper {
padding:10px;  
position:relative;


}

img {
width:250px;
height:250px;   
display:block;
}
.one {
 position:absolute;
top:10px;
left:5%;
}
.two
{
 position:absolute;
    top:10px;
    left:40%;
}
.three {
    position:absolute;
top:10px;
    right:5%;
}





div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;

}


div#footer {

background-image:url('images/sig.jpg');
background-repeat: no-repeat;
background-position: right bottom;
height: 50px;   
margin: 0px;
text-align: center;


}
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Sunset27
  • 3
  • 2

3 Answers3

1

Try the solution in this fiddle.

For explanation: see this answer.

Community
  • 1
  • 1
NGLN
  • 43,011
  • 8
  • 105
  • 200
0

on img add a padding

img {padding:5px;}

then add a min-width to the wrapper class.

so if all images are 250px, there are 3 images that is 750px off the bat. then you add a 5px padding to each image which adds 30px in width and puts us at 780px.

so...

.wrapper {min-width:800px;text-align:center;}
Jesse William Szypulski
  • 78
  • 2
  • 12
  • Wow, I didnt expect help to come so quickly. Thankyou to you all who have replied so far. I will try those sollutions out now. Thanks. :) – Sunset27 Oct 27 '11 at 22:18
0

Add a min-width to the wrapper to be sure the images don't shift down to the next line.

.wrapper {
  padding:10px;  
  position:relative;
  min-width: 750px;
}

Then move the images with absolute positioning to their desired locations:

img {
  width:250px;
  height:250px;   
  display:block;
  position: absolute;
}
.one {
  left: 0%;
}    
.two {
  left: 50%;
  margin-left: -125px;
}
.three {
  right: 0%;
}

Note the margin-left on the second image. That number is half the width of the image. So you are basically putting the image at 50% and then shifting it back half the width.

Also, if you don't want .one and .three right on the edges you could use left: 10px and right: 10px respectively.

Fiddle: http://jsfiddle.net/neilheinrich/ADUg2/

nheinrich
  • 1,841
  • 11
  • 17
  • Thankyou, That was really helpful. I appreciate your help. – Sunset27 Oct 27 '11 at 22:40
  • Thanks for your help. I think I want to have the left and right images a bit more in from the edges so changed the left and right image values (of .one and .three) to 40px Do I then have to change the margin left on .two? I'm trying to resize it and the images are not stopping next to each one as you make the browser smaller but instead going over. It is friday and I'm sure it must be something simple but right now I cant work it out. Any help is once again much appreciated. Thanks. – Sunset27 Oct 28 '11 at 16:48
  • To accommodate the additional width you'd want to expand the `min-width` of the container. So if you had 3x images at 250px (750px) and 40px for each edge (80px) you'd want the container to be 810px. Here's an example: http://jsfiddle.net/neilheinrich/ADUg2/2/ – nheinrich Oct 29 '11 at 02:14
  • Thankyou. That really helped and I think I understand it a bit more now. – Sunset27 Nov 01 '11 at 19:33