Whats the code for positioning my images side by side?

**patientprincess** · Dec 28, 2008 17:24

Hello,

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.

**Blake Tallos** · Dec 28, 2008 19:39

Code CSS:

<!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">
<head>
<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;
 
}
</style>
</head>
<body>
        <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 ">
 
</div>
</div>
</body>
</html>

**Dr John** · Dec 29, 2008 03:49

css
.lefty {
float:left;
}
padding borders and margins as required.

html

<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.

**busylinks1** · Dec 29, 2008 06:41

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

**barry-M** · Jan 29, 2009 03:28

Originally Posted by busylinks1

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

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.

**canassassin** · Jan 29, 2009 10:47

Originally Posted by barry-M

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.

**Blake Tallos** · Jan 29, 2009 13:50

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

**JonathanKF** · Jan 29, 2009 16:22

Originally Posted by BlakeAnthony

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

Code CSS:

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

Code CSS:

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

where "padding-top" would be reduntant...

User Tag List

Thread: Whats the code for positioning my images side by side?

Thread Tools

Display

Whats the code for positioning my images side by side?

Bookmarks

Bookmarks

Posting Permissions