Whats the code for positioning my images side by side?


I need some help with my new site on sugar. can someone please tell me how do I position my images next to each other so i wouldnt have to scroll down as much as i do now. THanks. any help appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>images side by side</title>
<style type="text/css">
#container { /*Your main page */
width: 600px;
height: 300px;
margin-left: auto;
margin-right: auto;
#Box   {
width: 300px;
height: 300px;
img   {
width: 200px;
height: 200px;
padding: 20px;  /*Lets give these guy's some padding*/
padding-top: 20px;

        <div id="container">
             <div id="box">
                <img src="http://blakeanthony.net/Sitepointmembers/995000_46458615.jpg" alt="Binary">
                <img src="http://blakeanthony.net/Sitepointmembers/995000_46458615.jpg" alt="Binary ">

.lefty {
padding borders and margins as required.


<img class=“lefty” src=etc, etc>

Now only the selected images given the class lefty will float left. Anything else given the class lefty will also float left, making this a generally useful class. Guess what class name I’d use to float right?

It’s a good idea to have a clearfix class applied to the first thing that you wish to come after and below the last image that is floated left.

.clearfix { clear:both;} - there are more elaborate clearfix classes, but this does work.

why not you chose a simple method of align=left attribute of img tag or arrange images in table…
<tr> <td>
<img src=“http://blakeanthony.net/Sitepointmembers/995000_46458615.jpg” alt=“Binary”>
<td> <img src=“http://blakeanthony.net/Sitepointmembers/995000_46458615.jpg” alt="Binary "> </td>

Ditch the tables and go with float:left …

its quicker and easier to add to pages and also will load quicker because the table has more code.

I agree. tables are becomming things of the past now that pretty much every effect needed can be created with css. Not to mention css floats are much easier to accomplish.

Use my code it places the images side by side with one another. Using CSS

Yes, blake’s code should display quite nicely, and the images should display side-by-side as long as there is a enough horizontal space (width) in the containing element (div?).

as long as you don’t put <br /> tags after images, or make them display:block etc etc they should always display inline anyway…

also don’t add

img   {
width: 200px;
height: 200px;


to your CSS file unless you want all images exactly the same 200px x 200px size or you are willing to manually target and override each image later in the CSS file!

I also can’t see why you would use

img   {
padding: 20px;  /*Lets give these guy's some padding*/
padding-top: 20px;


where “padding-top” would be reduntant…