Images in <div> areas

[TheSpeedoBeast]

I have been a lurker here for quite some time, and I finally decided to come out and actually post a question here... this one's way too specific to be answered elsewhere (or so I convinced myself...)

I was wondering if anyone could direct me to how one would insert 2 images right next to each other into the left navigation bar on my practice-website (yes, its mooched off of someone else, but don't worry; I am just picking it apart to learn something about CSS-formatting) I am able to insert the linked images just fine, but they appear on top of each other instead of side by side, which I want them to be... any help would be beautiful!

HTML File: http://home.new.rr.com/thespeedobeast/pager.htm
CSS File: http://home.new.rr.com/thespeedobeast/styles.css

Thx in advance--
--Matt

[COBOLdinosaur]

put each of them in its own span. Then for the one you want on the right. declare it first and add style="float:right"

Just make sure the containing element is wide enough to hold them sid by side.

[shlagish]

If you want to learn something about css formating:

http://www.W3Schools.com/css/default.asp

[TheSpeedoBeast]

Yeah, i've read over the w3 schools website quite a few times, looking for a tip, but I guess I overlooked the float option... thanks for the reply, I'll get right on that and I will let you know if it works out...

[pardicity3]

Hmm, there really shouldn't be a need for special coding to get images side by side. First off, your left nav is specified at 180px in width, are your two pictures' combined width greater than this? That would result in one picture being forced below the other.

Also, you may wish to specify border: none; padding: 0px; margin: 0px; That way, there will be no extra width applied to the images. I am thinking that perhaps your images' combined width is very close to 180px and having padding or a margin or even a border could make the width too much.

I suppose if all else fails you could always specify clear: none; but I don't see a real reason for this as img tags usually don't clear other elements. Plus this won't help if you don't have enough width in the first place.

Just make sure that your images' widths don't add up to more than their specified container.

[TheSpeedoBeast]

Well, I found out why the images were being placed on top of each other instead of side-by-side; display:block was activated for the 'leftnav' div, so it was popping everything down a level. I now have reached the point of getting them side-by-side when nonlinked, but when I hyperlink 'em, they get thrown back on top of each other. I updated my links so that that will be a little bit more... visual now. I think that I might need to do something like:

#image a {
display: inline;
}
#image2 a {
display: inline;
}
(this is all happening near the bottom of the stylesheet)

However, I think I may have messed that up somehow... is there any way to clear what the ''#leftnav a {}'' section says for just those two images? I think that the display:block command is still being held on to for some reason... Keep the input coming, it's been great so far!

[cg9com]

why are you using a display block on simple anchor tags anyway?

seems like you can find a better solution, and avoid this problem at the same time.

[ronaldb66]

If you're new to CSS formatting, I wouldn't suggest starting with a rather complicated example like that; better start with a simple and easily understandable example and work your way up from there. Or delve through a decent tutorial.

[TheSpeedoBeast]

I dunno... try taking the 'block' display out of the 'leftnav' section of my css... it looks kind of... funny.

I am at a loss here, thanks for the replys though