Placing Images side by side

Hi Guys
I want to place 2 images side by side in my div and would like to know the easiest way to do this. I did have a table before which did the job but something went wrong and my table could only be placed in the div as an Ap Div which I do not want as on certain browsers it would move around.
Could anyone help please?
Many thanks!

The rule that applies to those images is this -
.main img {
    clear:both;
    float:left;
    padding:5px;
    border:1px solid #FFF;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 0;
It will apply to ANY image within the .main container, including those within .mail-navigation, so you may not want to make changes to it.
My last fix should have also worked - did it?

Similar Messages

How can I automate placing 2 different images side by side in Photoshop?

I have two folders of .jpeg images. I need to take the matching images from each folder and place them side by side, then save as one file. Is there a way to automate this?

I would recommend a Scripting approach.

Placing 2 images side by side in a div and not hving a gap between them

I'm building my first website http://www.ClayBernard.com and having a problem in the div "#logoAndBanner" - when I place 2 images side by side I get a gap so in the browser they look disjointed. I want to make them seamless.
Any ideas would be great
Thanks

Hi,
what's about this:
<div id="logoAndBanner"><a href="index.html"><img src="images/BANNERS/IndexBanner_rev00.png" width="1000" height="80" border="0" /></a><img src="images/BANNERS/Banner_Contact_rev00.png" width="100" height="80" border="0" /></div>
Hans-G.

I want to make a video clip using two still pictures, placing side by side. I am able to make with only one at a time.

I want to make a video clip using two still pictures, placing side by side. I am able to make with only one at a time. Also, I am able to move the picture using Transform. But unsuccessfull in making with two stills in same clip. Thank you for reply.

If you want a Picture in Picture effect, stack one still on top of the other with a connect edit. Use Transform to scale and reposition the top image.
Russ

Help on perplexing PS issue (side-by-side images)

Every once in a while I print that has two side-by-side images on one piece of paper. My usual routine is to create a new document that is larger than the two images--say, 10x8 (horizontal) with a transparent background and the same resolution as the two images that I'll be placing on the canvas (say, two 4x3's). Then I simply click on the image I want to move and drag it from its layers palette onto the blank background canvas, and move/edit/size as needed. Ditto with the second image. This has worked great for me.
Until tonight. Same routine. Except when I drag an image over to the blank canvas, it assumes the size of the entire canvas. so I just have the image... enlarged. With no background canvas.
This is driving me nuts. Anyone know what I'm doing wrong or if inadvertently hit some setting? BTW, when I click on the new image (the one dragged to the canvas), all of the editing commands are grayed out. So I cannot resize or move it.
I'm on CS5 (mac)
Thanks!

It seems way too obvious, but what are the pixel dimensions of the the two images? If I have two portrait mode images, for instance, I open both, and check their pixel size. Then the larger is downsized to the exact same height as the smaller, and the smaller image's Canvas size increased to the exact pixel width of the larger's. That way I know that the two will fit perfectly on one canvas.
Or I just use Picture package and save myself a heap of time!
BTW I have Picture Package in CS5, but not CS6. Can it still be DL'd as an xtra?
Ahhh... Check this thread
http://forums.adobe.com/message/4377236

Putting two separate images side by side in the same document

Hello
I'm new to the community and hope I'm posting this question in the right area.
I've downloaded the 30 day free trial of Photoshop CC 2014 and I'm attempting to put 2 separate images side by side in the same document based on an instructional video I watched on Lynda.
I know of one way to do this but, the Lynda's instructor method made things look so much easier and quicker to do.
He didn't create a new canvas or make any image size adjustments.
He basically imported 2 images, used the move tool to drag the open image and drop it in the the tab heading of the other image.
After doing that, he ended up with two layers, the background layer and the "layer 1" layer.
He then was able to use the move tool again to position layer 1 in the document and then use the expand all option (I think it was) so both images were visible side by side.
He moved the layer 1 layer to the far left that it almost wasn't visible and that's why he used the expand all function.
The problem I'm running into is, I'm not getting the "layer 1" after doing the drag and drop.
The only layer I have is the background layer.
The odd thing is, that was the only layer he had as well after he did the drag and drop.
But, after he gave the tip of holding the shift key while the drag and drop was being done to center the images, it was then, the layer 1 layer appeared in his layers pallet.
I tried holding the shift key as well and I still can't get the layer 1 to appear.
I've watched the video a few times to see if I missed something he did and i can't see that I have.
How do I get layer 1 to appear so I can complete the rest of the process described in the video?
If any members here have full access to the Lynda videos, this is the one I watched:
The instructions for this particular process is about half way through the 4 minute video.
I've sent basically the same question to Lynda but it could take up to 3 business days for a reply and I was hoping someone here might have an answer sooner.
Watching:
Combining multiple images together as layers
From:
Photoshop CC for Photographers: Fundamentals
with Chris Orwig

Trevor,
Fleming doesn't want to extend the canvas, mind you.
P Fleming wrote:
He didn't create a new canvas or make any image size adjustments.
He also doesn't want to drag layers but drag image tabs.
And the video tutorial ends up with two different images on top of each other, contrary to his initially desired "side by side" arrangement.
It's all for the birds, IMO.

Centre text and image side by side.

Hi, I was able to centre two images side by side fine with my old website page but once I changed one of the images into text I cant seem to align them side by side anymore.
Old (image next to image):
http://dkphotos.net/About/About.html
New (text next to image):
http://dkphotos.net/AboutNew/About.html
Any help would be very appreciated.
HTML:
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" >
   <link rel="icon" type="image/gif" href="../../animated_favicon1.gif" >
<title>About</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">

<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
          <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
          <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
<style>
body,td,th {
              font-family: "josefin-slab";
          font-style: normal;
          font-weight: 400;
          font-size: 15px;
          color: #444444;
/**LINKS**/
a {
font-family: "Josefin Slab";
font-size: 15px;
font-weight:400;
text-decoration:none;
color: #777777;
a:link {
          color: #444444;
          font-style: normal;
          font-weight: 400;
          font-family: josefin-slab;
          font-size: 15px;
a:visited {color: #444444;}
a:hover {color: #60baec;}
a:active {
          color: #444444;
          font-style: normal;
          font-weight: 400;
          font-family: josefin-slab;
          font-size: 15px;
a:focus {color: #60baec;}
ul {
list-style:none;
margin:0;
padding:0;
li {float:right; padding-right: 30px}
body,td,th {
          font-family: josefin-slab;
          font-style: normal;
          font-weight: 400;
          font-size: 15px;
          color: #444444;
abou
p1 {
          font-family:josefin-slab;
          font-style:normal;
          font-weight:400;
          font-size:18px;
          color:#444444;
p2 {
          font-family:josefin-slab;
          font-style:normal;
          font-weight:400;
          font-size:18px;
          color:#444444;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>

<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/josefin-slab:n1,n4:default.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapOverall">
<div class="container" id="headerContainer">
   <div class="header"><a href="../Home/Home.html"><img src="images/Home-Page_03.png" width="448" height="69" class="logo" id="Logo" onMouseOver="MM_swapImage('Logo','','images/home_03-roll-over.png',1)" onMouseOut="MM_swapImgRestore()" alt="Dovydas Kaltanas"/></a></div>
<div class="navMain">
          <div class="navMain">
<ul class="navBar"
    style="width: 530px; float: right; font-weight: 400; font-family: josefin-slab; font-style: normal;">
                    <li><a href="Contact.html">CONTACT</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="../About/About.html">ABOUT</a></li>
                    <li><a href="">PRICING</a></li>
                    <li><a href="../Portfolio/Portfolio.html">PORTFOLIO</a></li>
                    <li><a href="../Home/Home.html">HOME</a></li>
          </ul>
        </div>
</div>
</div>

<div id="Container">
<div id="leftAbout">
<p1>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p1>
                              <p2><br /><a href="../CurriculumVitae.pdf">Curriculum Vitae</a></p2>
</div></p></div>
<p></p>
<p><div id="rightAbout"><img src="images/profile.jpg" width="450" height="736">
<p></p>
</div>

<div id="containerFooter">
<div id="Box1" style="font-family: 'Josefin Slab'">
<p>All content <span style="font-size: 20px">©</span> DKphotos 2013</p>
</div> 
<div id="Box2">
<p><script type="text/javascript">
// BeginOAWidget_Instance_2149022: #OAWidget
          var urlToLike = 'http://www.facebook.com/DKphotos.net';
          if (urlToLike == '') {
            urlToLike = window.location.href;
      urlToLike = encodeURIComponent(urlToLike);
      var font = encodeURIComponent('arial');
document.write ('<iframe src="http://www.facebook.com/widgets/like.php?locale=en_US&href='+urlToLike+'&layout=button_cou nt&show_faces=false&width=450&height=150&action=like&font='+font+'&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; border-color:#ffffff; overflow:hidden; width:450; height:150"></iframe>')
// EndOAWidget_Instance_2149022
</script>
</div>
</div> 

<hr class="clearing" />
</div> 
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body {
          background-image:url(images/bg_body.jpg);
          background-color:#ffffff;
          background-attachment:fixed;
          background-position:top;
.wrapOverall {
          width: 1920px;
          display: inline;
img { border: 0; }
ul.navBar {
margin: 18px 0px 0px 0px;
padding: 0;
white-space: nowrap;
width: 950px;
overflow-x: auto;
display:inline-block;
ul.navBar li {
          display:inline;
.header img.logo{
          float: left;
          margin: 0px 15px 0px 15px;
.container {
          min-width: 1050px;
#Container {
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 0;
width: 900px;
margin:0 auto; /*centered*/
overflow:hidden; /*float containment*/
#Container {
     clear:both;
     width: 100%;
     min-width: 900px;
#left {
          width: 300px;
          min-height: 550px;
          margin-bottom: 200px;
          border: 0;
          /*to reduce float drop issues in IE*/
          word-wrap: break-word;
          margin-left: auto;
    margin-right: auto;
#ContentBox1 {
          width: 450px;
          min-height: 550px;
          margin-bottom: 200px;
          border: 0;
          /*to reduce float drop issues in IE*/
          word-wrap: break-word;
          margin-left: auto;
    margin-right: auto;
/**Clear floats after the boxes**/
.clearing {
clear:both;
visibility:hidden;
line-height:0;
font-size:1px;
display:block;
#containerFooter {
width: 100%;
min-width: 650px;
max-width: 100%;
color:#444444;
font-style:normal;
font-weight:400;
font-family:josefin-slab;
font-size:15px;
text-decoration:none;
#containerFooter {
font-family:josefin-slab;
border: 0;
margin:0 auto; /*centered*/
overflow:hidden; /*float containment*/
#Box1, #Box2 {
          width: auto;
          min-height: 10px;
          border: 0;
          /*to reduce float drop issues in IE*/
          word-wrap: break-word;
#Box1 {margin-left: 8px; float: left;}
#Box2 {margin-left: 20px; float: left;}
/**Clear floats after the boxes**/
.clearing {
clear:both;
visibility:hidden;
line-height:0;
font-size:1px;
display:block;
          #containerFooter {
                    width:100%;
                    float:left;
                    #containerFooter {
          position: fixed;
          bottom: -145px;
          z-index: 500;
          background-color: #FFF;

Overall width of the website is 1920px???? That's way too wide.
Anyways you would need to 'float' the leftAbout and rightAbout containers if you want the text to be to the left of the image:
#headerContainer {
    overflow: hidden;
#leftAbout {
    float: left;
    width: 400px;
#rightAbout {
    float: left;
    width: 450px;
#containerFooter {
    clear: both;
I'll leave you to ajdust the width of the text container - leftAbout

How do I view images side by side in CS6?

In Photoshop CS5 I could click on a button to view images side by side or above and below. In CS6 my button is gone. How do I view images side by side/above and below?

Go to the menus: Window - Arrange - xxx
-Noel

Simple question: How to set a different image to each side of a 3D cube?

Hi all,
I'm very new in the use of Java 3D and I would like to know how to set, in a 3D cube, for each side a different image.
Currently I've the code to set an image as texture of the cube, but it applies the same image to all the sides. However, I would like to use different images for each side.
This is my code: http://pastebin.com/sexBx57K
Any clue?
Thanks!

I think I worked it out.
I just have to set the JAXP parser
Q. How do I use a different JAXP compatible implementation?
The JAXP 1.1 API allows applications to plug in different JAXP compatible implementations of parsers or XSLT processors. For example, when an application wants to create a new JAXP DocumentBuilderFactory instance, it calls the staic method DocumentBuilderFactory.newInstance(). This causes a search for the name of a concrete subclass of DocumentBuilderFactory using the following order:
1. The value of a system property like javax.xml.parsers.DocumentBuilderFactory if it exists and is accessible.
2. The contents of the file $JAVA_HOME/jre/lib/jaxp.properties if it exists.
3. The Jar Service Provider discovery mechanism specified in the Jar File Specification. A jar file can have a resource (i.e. an embedded file) such as META-INF/services/javax.xml.parsers.DocumentBuilderFactory containing the name of the concrete class to instantiate.
4. The fallback platform default implementation.

Copy and paste images in server side folder

Hi ,
I want to copy & paste the images in server side folder .
Have you any idea than please send me.
Thanks.
Have a nice day

Client side: Reading/Sending file contents
FileInputStream in = new FileInputStream(filePath+"\\"+fileName);
int size = in.available();
byte data[] = new byte[size];
in.read(data,0,size);
in.close();
//calling remote method for sending file
uploadFile(fileName,data);
Server side method
public boolean uploadFile(String fileName,byte []data) throws IOException, ServerNotActiveException {
        FileOutputStream out = new FileOutputStream(fileName);
        out.write(data);
     out.close();
}

How can i split the edit screen to have the same image side by side?

In other words I want to have the before and after right next to each other
thanks in advance!

In Quick and Guided modes there is a View: Before and After; however, if Expert mode, there is no such view.
In Export mode what you can do is open the Photo Bin, and right-click Duplicate, then choose Window / Tile and see the two images, side-by-side. Then you can do your edits on one of the two images and the other will remain the same.

Is it/shouldn't it be possible to order postcards with full image on both sides?

Is it/shouldn't it be possible to order postcards with full image on both sides?

Yes, you can create such a card. This example is the folded Holiday Colors theme. Just choose the layout for the inside that includes a full page photo on top and text on the bottom.
OT

Images side by side in a cell

This page has PHP rendered
tables that have two images in one cell, that are now displaying
one on top of the other. I recently added the required code for the
navigation bar; prior to that, my images displayed side by side in
the cell without issue. Because it's a generated table, I can't
place the two images in two separate cells.
The tables with the problem, as you can surely see, are those
on the right called "Shopping Cart" and "Reviews", and on the left
called "What's New". The issue is clearly visible in the Shopping
Cart table; there's an arrow image and a curved block corner.
I'm not sure which pieces of code to post, but here's the bit
that includes the determination of whether that arrow is displayed:
~~~
class infoBoxHeading extends tableBox {
function infoBoxHeading($contents, $left_corner = true,
$right_corner = true, $right_arrow = false) {
$this->table_cellpadding = '0';
if ($left_corner == true) {
$left_corner = tep_image(DIR_WS_IMAGES .
'infobox/corner_left.gif');
} else {
$left_corner = tep_image(DIR_WS_IMAGES .
'infobox/corner_right_left.gif');
if ($right_arrow == true) {
$right_arrow = '<a href="' . $right_arrow . '" >' .
tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif',
ICON_ARROW_RIGHT) . '</a>';
} else {
$right_arrow = '';
if ($right_corner == true) {
$right_corner = $right_arrow . tep_image(DIR_WS_IMAGES .
'infobox/corner_right.gif');
} else {
$right_corner = $right_arrow .
tep_draw_separator('pixel_trans.gif', '11', '14');
$info_box_contents = array();
$info_box_contents[] = array(array('params' =>
'height="14" class="infoBoxHeading"',
'text' => $left_corner),
array('params' => 'width="100%" height="14"
class="infoBoxHeading"',
'text' => $contents[0]['text']),
array('params' => 'height="14" class="infoBoxHeading"
nowrap',
'text' => $right_corner));
$this->tableBox($info_box_contents, true);
~~~
I'd greatly appreciate assistance in figuring out how to get
these images to display side by side.

Your code
$info_box_contents = array();
$info_box_contents[] = array(array('params' =>
'height="14"
class="infoBoxHeading"',
'text' => $left_corner),
array('params' => 'width="100%"
height="14"
class="infoBoxHeading"',
Try changing the width="100%" to a lesser value, say 90%. The
two images
that you need to display inline with each other need atleast
a 23px wide
cell (12 + 11). The cell containing these images has no
defined width. If
you can modify your code to add the width parameter of 23px,
that'll do the
trick. Changing the width 100% to a lesser value should give
the other cells
space to expand.
As a trial measure, you can see if this works
Change this code :
$info_box_contents = array();
$info_box_contents[] = array(array('params' =>
'height="14"
class="infoBoxHeading"',
'text' => $left_corner),
array('params' => 'width="100%"
height="14"
class="infoBoxHeading"',
'text' => $contents[0]['text']),
array('params' => 'height="14"
class="infoBoxHeading" nowrap',
'text' => $right_corner));
To the code below:
$info_box_contents = array();
$info_box_contents[] = array(array('params' =>
'width="11px"
class="infoBoxHeading"',
'text' => $left_corner),
array('params' => 'width="100%"
class="infoBoxHeading"',
'text' => $contents[0]['text']),
array('params' => 'width="24px"
class="infoBoxHeading" nowrap',
'text' => $right_corner));
You don't need to define the cell height as the images have
height=14px
You cannot lose until you give up !!!
"kllwca" <[email protected]> wrote in
message
news:[email protected]...
>
http://davidgerald.com/store
has PHP rendered tables that have two images
> in
> one cell, that are now displaying one on top of the
other. I recently
> added the
> required code for the navigation bar; prior to that, my
images displayed
> side
> by side in the cell without issue. Because it's a
generated table, I can't
> place the two images in two separate cells.
>
> The tables with the problem, as you can surely see, are
those on the right
> called "Shopping Cart" and "Reviews", and on the left
called "What's New".
> The
> issue is clearly visible in the Shopping Cart table;
there's an arrow
> image and
> a curved block corner.
>
> I'm not sure which pieces of code to post, but here's
the bit that
> includes
> the determination of whether that arrow is displayed:
>
> ~~~
> class infoBoxHeading extends tableBox {
> function infoBoxHeading($contents, $left_corner = true,
$right_corner
> =
> true, $right_arrow = false) {
> $this->table_cellpadding = '0';
>
> if ($left_corner == true) {
> $left_corner = tep_image(DIR_WS_IMAGES .
> 'infobox/corner_left.gif');
> } else {
> $left_corner = tep_image(DIR_WS_IMAGES .
> 'infobox/corner_right_left.gif');
> }
> if ($right_arrow == true) {
> $right_arrow = '<a href="' . $right_arrow . '" >'
> tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif',
ICON_ARROW_RIGHT) .
> '</a>';
> } else {
> $right_arrow = '';
> }
> if ($right_corner == true) {
> $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES .
> 'infobox/corner_right.gif');
> } else {
> $right_corner = $right_arrow .
> tep_draw_separator('pixel_trans.gif',
> '11', '14');
> }
>
> $info_box_contents = array();
> $info_box_contents[] = array(array('params' =>
'height="14"
> class="infoBoxHeading"',
> 'text' => $left_corner),
> array('params' => 'width="100%"
> height="14"
> class="infoBoxHeading"',
> 'text' => $contents[0]['text']),
> array('params' => 'height="14"
> class="infoBoxHeading" nowrap',
> 'text' => $right_corner));
>
> $this->tableBox($info_box_contents, true);
> }
> }
>
> ~~~
>
> I'd greatly appreciate assistance in figuring out how to
get these images
> to
> display side by side.
>
>

Photo Elements 12, Mac OS X 10.9.5, Trying to combine two images side by side, same height. Get this message: "Panorama could not be created as some images could not be automatically aligned". Tried with several different images, same height each combo

Photo Elements 12, Mac OS X 10.9.5, Trying to combine two images side by side, same height. Get this message: "Panorama could not be created as some images could not be automatically aligned". Tried with several different images, same height each combo

One does not "see" the images when selecting; You just select two file names, click OK, PhotoShop does the rest, and comes back with same message.

Copy & paste the images in server side folder

Hi ,
I want to copy & paste the images in server side folder .
Have you any idea than please send me.
Thanks.
Have a nice day

[http://java.sun.com/docs/books/tutorial/essential/io/].

Placing Images side by side

Similar Messages

Maybe you are looking for