Quick DIV question...

I have 1 DIV and two images within the same DIV placed horizontally like this:


example DIV box
__________________________________________
|image A____________________________image B|



That's what I'm trying to accomplish.

Can someone help me out with the CSS to do that...I can't seem to get it.

<div>
<img blah blah blah>
<img blah blah blah>
</div>

Right now the images just butt up against each other to the left. I need image A on the left and image B on the right.

Thank you kindly!

 

<div>
<img style="float: left;" ...
<img style="float: right;" ...
</div>

 

Yea, do what SoKickIt said, that should work! (PS. make sure you clear the floats after you are done )

 

Thank you for the code Sokckit...

It's not quite working though. I'll do what I should have done before. Include a link to the site work in progress.

http://tinyurl.com/kk8l2

I'm not very well versed in CSS, so if it looks like a cut-n-paste job...well...sorry 'bout that

Anyway, when I tried the code you supplied, it aligned them okay...L&R, but it dropped them down under the pink bar and did some other strange things.

Here's a screenshot:

Try one: http://members.cox.net/travel.site/helpme/images/try1.gif

Anyone have any ideas?

Thank you.

 

Thanks...I tried the FLOAT thing and it looks better...but it nuked my header gradient for some reason.

See here:

http://members.cox.net/travel.site/helpme/images/try2.gif

CSS code for that:

#header {
background-color: #FFFFFF;
border: 0px solid black;
background-image:url('images/gradient4.gif');
}

 

This is what it looked like before making the two changes to the code. You can see what the gradient looked like.

Gradient: http://members.cox.net/travel.site/helpme/images/withGradient.gif

 

#header {
	background-color: #FFFFFF;
 	border: 0px solid black;
 	background-image:url('images/gradient4.gif');
/*	margin: 20px;*/
	/* padding: 20px;*/
}

Code (markup):

Add this:

height: 104px;

 

Perfect SoKickIt! Thanks very much!

 

No problem