1. Home
  2. Forums Index
  3. Browser Side / CSS 2:58 pm Apr 22, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Float 3 images on one line: left, center, right

         

mattdna

3:24 pm on Sep 7, 2011 (gmt 0)

10+ Year Member



Quite new to CSS (so please reply as if explaining to a 5 year old)...

I'm using a 3 column template; lets call the main center column the 'content column'.

I'm trying to create a class rule in CSS so that I can arrange 3 images on the same line in the content column; 1 aligned left, 1 aligned right, and 1 in the center of the other two.

I have the following class rule already set up in CSS for aligning images either left or right (with some padding and a border), but I cant work out what code to add to create an .image-center class that will sit in between these two:

.image-right {
background:#FFFFFF;
padding:5px;
border:#D3D2D2 solid 1px;
float: right;
margin-bottom: 10px;
margin-left: 10px;
}
.image-left {
background:#FFFFFF;
padding:5px;
border:#D3D2D2 solid 1px;
float: left;
margin-right: 10px;
margin-bottom: 10px;


I also have the following code I use when I want to center images on their own:

.image-centre {
background:#FFFFFF;
padding:5px;
border:#D3D2D2 solid 1px;
margin-right: 10px;
margin-bottom: 10px;
display: block;
margin-left: auto;
margin-right: auto;

but I cant seem to use this on the same line as .image-right and .image-left it only works when centering one single image per line.

Can anyone tell me how to create code for .image-center class that can be used with the float left and float right I already have?

birdbrain

4:25 pm on Sep 7, 2011 (gmt 0)



Hi there mattdna,

and a warm welcome to these forums. ;)

Try it like this... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<base href="http://www.pubcon.com/exhibitor/gfx/"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title> thre images in a row</title> 
 
<style type="text/css"> 
#image-container { 
  min-width:782px; /* width of 3 images (746px) plus images' padding and border (36px) */ 
  padding:10px; 
  border:1px solid #d3d2d2; 
  background-color:#f0f0f0; 
 } 
#image-container img { 
  padding:5px; 
  border:1px solid #d3d2d2; 
  background-color:#fff;  
 } 
#image-right { 
  float:right; 
  width:250px; 
  height:49px; 
 } 
#image-left { 
  float:left; 
  width:250px; 
  height:36px; 
 } 
#image-center { 
  display:block; 
  width:246px; 
  height:59px; 
  margin:auto; 
 } 
</style> 
 
</head> 
<body> 
 
<div id="image-container"> 
  <img id="image-right" src="lvicc_logo.jpg" alt=""> 
  <img id="image-left" src="mgm_mirage_logo.jpg" alt=""> 
  <img id="image-center" src="copyblogger_logo.jpg" alt=""> 
</div> 
 
</body> 
</html>

birdbrain

mattdna

5:25 pm on Sep 7, 2011 (gmt 0)

10+ Year Member



thanks for the reply.

Nothing happened when I added this. Not entirely sure if I'm doing it right. To clarify:

I'm using Dreamweaver, and have a CSS file style sheet which each HTML page links to. In the CSS file I have the code mentioned in my first post for .image-right and .image-left. When adding an image to an HTML page I just select .image-right and image.left in the 'class' drop down box and it adds the style to the image.

I cut and paste your code into the CSS file, but nothing happened when I tried to apply the class to the images.

Can you confirm :

Should I be adding this code to the CSS file or the individual HTML page?

If CSS, this is what I did:

I deleted my current code for .image-right, .-image.left, and center and replaced with your code above starting at your line 10:

"#image-container {
min-width:782px; /* width of 3 images (746px) plus images' padding and border (36px) */" etc

down to the last piece of code for the line titled #image-center, ending "margin:auto;}

When I returned to the HTML doc to try to apply these new classes to images, they dont even appear in the class drop down box in Dreamweaver.

So where have I gone wrong?

Sorry, I told you I'd need it completely spelled out to me ;-)

birdbrain

6:14 pm on Sep 7, 2011 (gmt 0)



Hi there mattdna,

unfortunately, "Dreamweaver" is a complete mystery to me. :(

I have always used "NotePad" to create code.

Perhaps one or the more erudite members here will be able to help you with "Dreamweaver".

To see the fruits of my labour, follow these instructions...
  1. Open NotePad.
  2. Copy & Paste my code into NotePad.
  3. How to Copy & Paste...
  1. With your mouse, place cursor at the beginning of the code.
  2. Hold the left-mouse down and then drag the mouse down to the end of the code.
  3. This has the effect of highlighting the code.
  4. Release the left-mouse.
  5. Right-mouse click will bring up a small dialog box.
  6. Scroll down the dialog box and click Copy.
  7. With your mouse, place cursor over NotePad.
  8. Right-mouse click will bring up a small dialog box.
  9. Scroll down the dialog box and click Paste.

Assuming that all this has gone to plan...
  1. Click the File tab.
  2. Click Save As....
  3. This will bring up a dialog box.
  4. In the file name input type your chosen file name with the extension .html.
  5. Select the desired 'Directory' in Save in: .
  6. Click Save.
  7. Go to your selected 'Directory' to test your file.
  8. Double clicking the some_name.html file will open it in your default browser
  9. Finally have a beer. ;)


I hope that this will help. :)

birdbrain

lucy24

9:12 pm on Sep 7, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



All floats should have an accompanying clear: {left}, {right} or {none} depending on which effect you want. You are not the first person who wished there existed a {float: center;} ;)

Does it behave the same in all browsers? I recently had a pretty staggering result in Chrome.* Luckily floats were irrelevant to what I was testing for so I didn't have to look for a fix.


* They may simply have been ahead of the AWK curve, because Safari and the SEE preview now do the same thing. Which means I do have to fix it. Watch this space; I'm worried.

oldcode

11:50 pm on Sep 9, 2011 (gmt 0)

10+ Year Member



I very much liked Birdbrain's solution and wanted to extend the code to include 5 images. The images are clustered on the upper left instead of spread horizontally on the page. Anyone have thoughts?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!--<base href="http://www.pubcon.com/exhibitor/gfx/"> -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title> three images in a row</title>

<style type="text/css">
#image-outercontainer {
position: relative;
padding:10px;
border:1px solid #d3d2d2;
background-color:#f0f0f0;
margin:auto;
}
#image-container {
position: relative;
width:541px;
margin:auto;
}
#image-container img {
padding:5px;
border:1px solid #d3d2d2;
background-color:#fff;
}
#image-outercontainer img {
padding:5px;
border:1px solid #d3d2d2;
background-color:#fff;

#image-right {
float:right;
width:125px;
height:35px;
}
#image-left {
float:left;
width:125px;
height:35px;
}
#image-center {
display:block;
width:125px;
height:35px;
margin:auto;
}

#image-outerright {
float:right;
width:125px;
height:35px;
}
#image-outerleft {
float:left;
width:125px;
height:35px;
}
</style>

</head>
<body>

<div id="image-outercontainer">
<img id="image-outerright" src="squaregold.png" alt="">
<div id="image-container">
<img id="image-right" src="squaregold.png" alt="">
<img id="image-left" src="squaregold.png" alt="">
<img id="image-center" src="squaregold.png" alt="">
</div>
<img id="image-outerleft" src="squaregold.png" alt="">
</div>

</body>
</html>

birdbrain

8:39 am on Sep 10, 2011 (gmt 0)



Hi there oldcode,

and a warm welcome to these forums. ;)

Try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.webmasterworld.com/gfx/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>five images equally spaced in a row</title>

<style type="text/css">
body {
margin:10px;
background-color:#def;
}
#image-container {
min-width:735px; /* width of 5 images (625px) plus images' padding and border (60px) plus images' margin (50px) */
height:47px;
padding:10px 5px;
margin:0;
border:1px solid #d3d2d2;
background-color:#f0f0f0;
list-style-type:none;
}
#image-container li {
width:20%;
float:left;
}
#image-container img {
display:block;
width:125px;
height:35px;
padding:5px;
border:1px solid #d3d2d2;
margin:auto;
background-color:#fff;
}
</style>

</head>
<body>

<ul id="image-container">
<li><img src="logo.png" alt=""></li>
<li><img src="logo.png" alt=""></li>
<li><img src="logo.png" alt=""></li>
<li><img src="logo.png" alt=""></li>
<li><img src="logo.png" alt=""></li>
</ul>

</body>
</html>

birdbrain

[edited by: alt131 at 10:58 am (utc) on Sep 10, 2011]
[edit reason] Side Scroll [/edit]

oldcode

7:19 pm on Sep 11, 2011 (gmt 0)

10+ Year Member



Much appreciated, birdbrain! The code works great.

birdbrain

7:31 pm on Sep 11, 2011 (gmt 0)



No problem, you're very welcome. ;)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:58 pm Apr 22, 2026