Display Two <div> Side-by-Side

[mwaw]

I have two divisions that each contain a photo and a caption. I want them to display side-by-side, but I can't get it to work. In essence, here is my mark-up:

<div style="width: 246px">
<img src="blah1" width="246" /><br />
This is a caption
</div>

<div style="width: 246px">
<img src="blah2" width="246" /><br />
This is a caption
</div>

You can view the whole page here:
[websites-graphics.biz...]

For ease of viewing, I have saved a copy of the stylesheet as a *.txt file here:
[websites-graphics.biz...]

I would appreciate suggestions!

Mike Wilkinson

[MWpro]

Welcome to WebmasterWorld, mwaw!

Since you are new, please check the charter and tos for the rules on posting links.

Linking: We do not post 'test pages' or 'examples'. or personal urls of any nature. We prefer to educate by giving people authoritative resources and prevent any possible conflicts of interest...

Have you tried floating both of the div's to get them side by side? Just add float: left; into the style tags of each of the div's. (I usually float both, although you may only have to float the first one.)

[mwaw]

I've tried adding "float:left" and "display: inline." Neither works, much to my surprise. Now that its a new day, I'll look over the code again to see if I am missing something.

[edisraf321]

The floats DO work, you just have to take into account the widths of your borders.

You have two borders 1px wide, so that's 4px (2 left borders, 2 right borders) that you need to add to 532px. So make your containder div 536px and it should work.

-Chris

[twist]

Try adding position:relative; and removing the width from your div containing your photos and define your width in your photo divs. Use the float tags on the photo divs. Something else I noticed is that you defined the height of your photo containing div to 186. Your photos are 186 but you also have text. You might want to adjust for the text.

*edit* Even better, what edisraf321 said.

[mwaw]

THANKS for the tips!

edisraf321 figured out the problem. When I fixed it, the page was rendered the way I wanted. Normally I remember to include the borders when I specify widths, but I think it was the end of a long day and my brain had faded.

Thanks!

Mike Wilkinson

[mwaw]

BTW - In keeping with the rules of the forum, I have deleted the files that are linked with the URLs I posted in my original message.

Thanks,

Mike Wilkinson