CODEWITHSUNDEEP
htmlcssbrowsersize
Sunset27
Sunset27

Reputation: 3

How can I space three images evenly, and avoid them overlapping when the browser window is small?

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;


}

Upvotes: 0

Views: 1087

Answers (3)

nheinrich
nheinrich

Reputation: 1841

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/

Upvotes: 0

NGLN
NGLN

Reputation: 43669

Try the solution in this fiddle.

For explanation: see this answer.

Upvotes: 1

Jesse William Szypulski
Jesse William Szypulski

Reputation: 78

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;}

Upvotes: 0

Related Questions