1

I am having difficulty getting 3 images of equal size to float properly. I have set the right and left margins on the center floated image to auto and it still doesn't work. All the panels in my layout are floated left which I revised from tutorials and works ok as they're butted up against each other, but trying to float images when there is more space than necessary, doesn't display as I want: with equal spacing between images Left & Center and Center & Right. My content panel is 534px wide with 10px padding taking up 554px plus a 1px border plus a 5px margin around the outside. The images are all 160px wide and I gave the FloatLeft class a 10px right margin, the FloatRight class a 10px left margin and the FloatCenter an auto margin for both left and right. Both FloatLeft and FloatRight are used on several pages, surrounded by text, which is fine.

Ok, update - I now realise float: center is not possible, DUH!, which is the problem - I'm just a few months into CSS etc.!

Are there any alternatives (other than a table). I could align them all left and make the margin: right attribute 27px (160px x 3 images + 27 + 27 = 534px) but then I'd need to create a new FloatLeft class specifically for these images. Any suggestions on the best method of aligning the images would be much appreciated.

Gary.

The relevant HTML & CSS:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solar Power Today</title>
<link rel="stylesheet" type="text/css" href="solarpower.css">
</head>
<body>
  <div id="wrapper">
  ...........
  <!-- header panel, then horizontal navigation panel then left panel then ... -->
  ..........
  <div id="content">
  <!-- main content -->
  <h1 id="contentheader">Introduction to Solar Power</h1>
  <p>
  <img class="FloatLeft" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining
  on roof solar panels" width="160" height="160">
  <img class="FloatCenter" src="images/smallwindturbine160px.jpg" alt="Small wind
  turbine spinning" width="160" height="160">
  <img class="FloatRight" src="images/waveturbine160px.jpg" alt="Wave turbines in
  motion" width="160" height="160">
  </p>


CSS:

* {padding:0; margin:0; border:0;}

.FloatLeft {
  float: left;
  margin: 0 10px 10px 0;
}
.FloatRight {
  float: right;
  margin: 0 0 10px 10px;
}
.FloatCenter {
  float: center;
  margin: 0 auto 10px auto;
}

#content {
  width: 534px;
  min-height: 400px;
  margin: 0px 5px 5px 0px;
  padding: 10px;
  float: left;
  border: 1px solid black;
  display: inline;
}
Gary Mack
  • 11
  • 3

4 Answers4

0

Here's one way you can achieve what you're looking for:

http://jsfiddle.net/CsjYN/1/

THE HTML:

<div id="content">

  <h1 id="contentheader">Introduction to Solar Power</h1>

  <div class="images">
   <img class="img-left" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining on roof solar panels" />

   <img class="img-center" src="images/smallwindturbine160px.jpg" alt="Small wind turbine spinning" />

   <img class="img-right" src="images/waveturbine160px.jpg" alt="Wave turbines in motion" />
  </div>

</div>

THE CSS:

#content {
 width: 534px; /* full width 556px */
 padding: 10px;
 border: 1px solid #000;
}

#content h1 {
 margin-bottom:20px;
}
#content .images {
 overflow:auto;
}
#content .images img {
 width:160px;
 height:60px;
 float:left;
}
#content .images img.img-left,
#content .images img.img-center {
 margin-right:27px;
}
Billy Moat
  • 20,792
  • 7
  • 45
  • 37
  • Hi, I looked at your suggestion. I can more or less see what's going on. You created a class .images only applying to the img tag within the #content div container. Then the margin-right value has been applied to 2 new subclasses img-left and img-center. That works but setting the px value means if the image sizes change then the margin-right value needs to be adjusted. I'm not sure what the overflow: auto does though. – Gary Mack Sep 13 '12 at 14:17
  • overflow:auto allows the container element to expand to whatever height it needs to expand to to accommodate the floated elements. The pixel values of your margins would need to change depending on the width of your images and so wouyld the width of the overall container element. – Billy Moat Sep 13 '12 at 14:25
  • Please don't just link to an external location: include in the answer the solution provided, or at the very least a summary of it. – ANeves Sep 13 '12 at 15:13
0

I recently tackled the issue of equally spacing and arbitrary number of elements across an unknown width using text-align: justify;. The full discussion can be found at “text-align: justify;” inline-block elements properly?, with good discussion on the pros/cons and alternate solutions.

Here's a fiddle showing how to arrange three images using the technique discussed. It should work in all major browsers, although feel free to kick the tires and get back to me with issues.

Community
  • 1
  • 1
thirdender
  • 3,891
  • 2
  • 30
  • 33
  • I wasn't aware justify will justify images too. I created a new div container for the 3 images and applied justify to the new container. However, I needed to add another image or some text to force a new line. It's annoying that justify only works on more than one line of text or images. I'm a bit confused on how I would apply the workaround adding an extra line 1.2em then hiding it with margin:-1.2em. Somehow the coding doesn't look/feel right. When I've more time I can look at that idea again, as it would allow 3+ images to be justified without worrying about the spacing between them. – Gary Mack Sep 13 '12 at 14:36
  • Yeah, it's tricky because you need a "clearing" line to force the images to act as their own "line" and become justified. As mentioned in the answers, `text-align-last: justify;` was an IE specific property that is becoming standardized… it will cause the last line to be justified without dealing with the clearing bit. Instead of trying do the `margin: -1.2em;` answer, try looking at the fiddle I just posted. It uses `line-height` instead. – thirdender Sep 13 '12 at 16:21
0

You are using float:center; in .FloatCenter class, that is invalid, there is no center value for float, put float:none; and chnage your margin length;

.FloatCenter {
  float: none;
  margin: 0 auto 10px 15px;
}
Krishna Kumar
  • 2,101
  • 1
  • 23
  • 34
0

I am trying, as far as possible to keep things simple. I would prefer to know how the code I'm applying works rather than using a solution without fully understanding it. I wasn't aware that text-align could help to align images so I had a play around with that. Until I fully understand the above text-align: justify solution which has lost me a bit, I have put the each of the 3 images in a new div container class .ImageBox:

.ImageBox {
  width: 178px;
  margin-bottom: 10px;
  float: left;
}

I then put each image inside a

element and used an inline style on the

element to align the image position:

<div class="ImageBox">
<p style="text-align: left"><img src="images/sunonsolarpanelroof160px.jpg" alt="Sun
  shining on roof solar panels" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: center"><img src="images/smallwindturbine160px.jpg" alt="Small
  wind turbine spinning" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: right"><img src="images/waveturbine160px.jpg" alt="Wave turbines
  in motion" width="160" height="160"></p>
</div>

I know inline styles are frowned upon but it uses less code than creating a separate div container for each image and setting the text-align property in each div container to either left, center or right in the stylesheet. I've also just realised that simply specifying width and or height properties and even a border (for testing purposes) will not show a div container in the browser. The div container class appears to need either a float or clear property for the box to come to life. I need to learn more css.

Gary Mack
  • 11
  • 3