Menu
Community /Pin to ProfileBookmark
@NogDogAug 09.2006 — #I might do something like this:
CSS:
@NogDogAug 09.2006 — #I use the float so that they can be displayed on the same "line" while still functioning a block-level elements, allowing the assignment of a width. Here's a better example, using a percentage for the widths, and using semantic markup (making it a unordered list):
How to evenly distribute images horizontally in a container
I have 5 images which have the same height but different width. Those are tiny little images for links. What I’d like to achieve is to evenly place them horizontally in a div container. The problem I am facing by using CSS is how to distribute those images evenly in the container with % spacing so the space between the images are the same and the space will expand and contract depending on the window size. below is what I have:
<div id=”links”>
<img src=”Images1.gif” >
<img src=”Images2.gif” >
<img src=”Images3.gif” >
<img src=”Images4.gif” >
<img src=”Images5.gif” >
</div>
So far I have tried “text-align:justify”, putting images in separate div containers, margin/padding with % etc without sucess. Is this some complex in CSS or I just don’t know what I am doing? Any help will be much appreciated.
Sign in
to post a comment7 Comments(s) ↴
0
@NogDogAug 09.2006 — #I might do something like this:[code=html]
<div id="links">
<div><img src="Images1.gif"></div>
<div><img src="Images2.gif"></div>
<div><img src="Images3.gif"></div>
<div><img src="Images4.gif"></div>
<div><img src="Images5.gif"></div>
</div>
[/code]CSS:
<i>
</i>#links div {
float: left;
width: 50px; /* adjust to desired width */
height: 50px; /* adjust to desired height */
text-align: center;
padding: 0;
margin: 0 5px; /* adjust as desired */
}
#links div img {
border: none;
vertical-align: middle;
}
0
@NogDogAug 09.2006 — #I use the float so that they can be displayed on the same "line" while still functioning a block-level elements, allowing the assignment of a width. Here's a better example, using a percentage for the widths, and using semantic markup (making it a unordered list):[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Page Title</title>
<!-- link rel='stylesheet' href='style.css' type='text/css' -->
<style type="text/css">
<!--
#links {
margin: 0;
padding: 0;
list-style: none;
}
#links li {
float: left;
width: 20%;
margin: 0;
padding: 0;
text-align: center;
}
#links li img {
border: none;
}
-->
</style>
</head>
<body>
<ul id="links">
<li><a href="#"><img src="noggin.png" alt="link" width="50" height="49"></a></li>
<li><a href="#"><img src="noggin.png" alt="link" width="50" height="49"></a></li>
<li><a href="#"><img src="noggin.png" alt="link" width="50" height="49"></a></li>
<li><a href="#"><img src="noggin.png" alt="link" width="50" height="49"></a></li>
<li><a href="#"><img src="noggin.png" alt="link" width="50" height="49"></a></li>
</ul>
</body>
</html>
[/code]