align two elements either side of a DIV

[miraclemaker]

Can anyone tell me how I can align one image on the left hand side of a DIV, and a second one one the right hand side, without using a table?

I've tried using a second DIV within the first one, but the second element within that DIV is pushed down below the first one - I want them to be on the same 'line'

Thanks in advance!

 

[HellTel]

Hi miraclemaker, you could try this:

<div>
<img src=&quot;pic1.gif&quot; align=&quot;left&quot;>
<img src=&quot;pic2.gif&quot; align=&quot;right&quot;>
</div>

Just make sure the width of the div is enough to accomodate both images. Hope I helped / Thanks for helping
if ((Math.abs(x)<10&&Math.abs<10) && (((parseInt(Math.abs(x).toString()+Math.abs.toString())-Math.abs(x)-Math.abs)%9)!=0)) {alert(&quot;I'm a monkey's uncle&quot;}

 

[miraclemaker]

using align=&quot;left on the first image causes it to no longer be completely conatined within the div - the containing div has solid borders and is like a haeding 'bar' at the start of a section on my web page.

The second image is in fact a link, I said it was an image to try and simplify things.

Having the text in the div makes it taller than it is without the text, weird.

 

[HellTel]

Oh yeah, I see what you mean, it does. Sorry about that.
Well, a table would be best, but I suppose you could put a 1px tranparent spacer image in between them and make the width of the spacer equal to the amount of space you want. (width of div - image 1 width - image 2 width).
Oh, a text link? Well, maybe a bit of experimenting with the width of spacer?
That's it, I'm spent! Hope I helped / Thanks for helping
if ((Math.abs(x)<10&&Math.abs<10) && (((parseInt(Math.abs(x).toString()+Math.abs.toString())-Math.abs(x)-Math.abs)%9)!=0)) {alert(&quot;I'm a monkey's uncle&quot;}

 

[mgriffith]

what you could do would be to wrap each of the images in a <span> or any other tag with style=&quot;display:inline;&quot;... then align each of those to the left or right

<div width=&quot;100%&quot;>
<span style=&quot;text-align:left; width:49%;&quot;>
<img src=&quot;1.gif&quot;>
</span>
<span style=&quot;text-align:right; width:49%;&quot;>
<img src=&quot;2.gif&quot;>
</span>
</div>

the reason for the width being 49% each rather than 50% is the padding in the div cell and the margins around the spans would push the second span into a second row because it wouldn't fit... this gives a little padding to it mike griffith

----------------------------
systems and control engineering
case western reserve university
mdg12@cwru.edu

 

[miraclemaker]

Thanks. Almost perfect, except the 'bar' using the CSS is two pixels thicker than with using the table.

This only happens in ie, in Opera it is fine. I've tried setting margin:0px 0px 0px 0px on both spans but it doesn't help.

 

[mgriffith]

hmmmm i'm not sure what you mean by the bar, but did you also try to set the padding and margin on the div cell to 0?? mike griffith

----------------------------
systems and control engineering
case western reserve university
mdg12@cwru.edu

 

[miraclemaker]

I'm using the DIV to implement a section heading it's like a 'bar' across the page before content. On the left it has the title image and on the right it has a text link: 'search archive'.

setting padding or margin on the DIV had no effect, unfortunately.

 

[mgriffith]

what do you mean it is thicker? if you mean the bar is wider than the content below it, then put a padding of 1px around the div... that would give it 1px on each side for a total of 2 px

if you want to post your code (or at least a snippet) i might be able to help more mike griffith

----------------------------
systems and control engineering
case western reserve university
mdg12@cwru.edu

 

[miraclemaker]

What I mean by thicker is that is thicker in a height respect. Heres some code for you to check out:

The table version is at the top, and the CSS version underneath

<div class=&quot;title&quot;>
<table border=0 cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;495&quot;><img src=&quot;images/latestnews.gif&quot; height=&quot;15&quot; width=&quot;120&quot; alt=&quot;&quot;></td>
<td><a href=&quot;searcharticles.php&quot;>search archive</a></td>
</tr>
</table>
</div>

<div class=&quot;title&quot;>
<span style=&quot;display:inline;text-align:left;width:49%&quot;><img src=&quot;images/latestnews.gif&quot; height=&quot;15&quot; width=&quot;120&quot; alt=&quot;&quot;></span>
<span style=&quot;display:inline;text-align:right;width:49%&quot;><a href=&quot;searcharticles.php&quot;>search archive</a></span></div>

and heres the css for &quot;title&quot;:

div.title-light
{
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
background-color:#FF0000;
margin-bottom: 2px;
margin-left: 2px;
}

 

[mgriffith]

ahhh ok... try this... i set the leftmost cell to have a width=495, and then let the right cell hang in right beside it. i thought you wanted the div to fill the entire horizontal width of the screen.


<div class=&quot;title&quot;>
<span style=&quot;display:inline;text-align:left;width:495px&quot;>
<img src=&quot;images/latestnews.gif&quot; height=&quot;15&quot; width=&quot;120&quot; alt=&quot;&quot;>
</span>
<span style=&quot;display:inline;text-align:right;&quot;>
<a href=&quot;searcharticles.php&quot;>search archive</a>
</span>
</div>
mike griffith

----------------------------
systems and control engineering
case western reserve university
mdg12@cwru.edu

 

[miraclemaker]

The width=495 in the table version of the bar is not required to set the width of the bar itself, its just in there to get the hyperlink to sit on the right hand side of the table. I do indeed want the div to fill the entire width of the screen (or at least it's parent comtainer).