Side by Side HTML boxes

[cumulonimbus]

I want to make two html div boxes beside each other (with an 18 pixel space in between), but it messes up in Firefox and any else except IE. Can someone help? I would prefer solid HTML. (No CSS) This is the code I have been using.

<div style="position: relative;
margin-left: 0px; margin-right: 18px; margin-bottom: 0px; margin-top: 0px;
padding: 1px;
height: 100%;
width: 200px;
background-color: #EAE6D4;
float: left;">
Left Box
</div>

<div style="position: relative;
margin: 0;
padding: 1px;
height: 100%;
width: 200px;
background-color: #EAE6D4;">
Right Box
</div>

[Jackson Hole]

Just float that right box to the left...

<div style="position: relative;
margin-left: 0px; margin-right: 18px; margin-bottom: 0px; margin-top: 0px;
padding: 1px;
height: 100%;
width: 200px;
background-color: #EAE6D4;
float: left;">
Left Box
</div>

<div style="position: relative;
margin: 0;
padding: 1px;
height: 100%;
width: 200px;
background-color: #EAE6D4;
float: left;">
Right Box
</div>

[stinkee]

This is probably how I would do it. Your style attribute is css, you can't get away from css with this.

<div style="height:100%">
<div style="height:100%;width:200px;background-color: #EAE6D4;float:left;margin:0 18px 0 0;">
Left Box
</div>
<div style="height:100%;width:200px;background-color: #EAE6D4;float:left;">
Right Box
</div>
</div>

[coho75]

<div style="margin:0 18px 0 0;
padding: 1px;
height: 100%;
width: 198px;
background: #EAE6D4;
float: left;">
Left Box
</div>

<div style="margin: 0;
padding: 1px;
height: 100%;
width: 198px;
background: #EAE6D4;
float: left;">
Right Box
</div>

You can get rid of the 'position:relative' when you add the 'float:left' -- you also want to shrink both boxes by 2px because the padding:1px will add a pixel to each side of the box. Not doing so will render each box 202px wide.

[cumulonimbus]

Thanks, everyone for your most helpful responses and kindness. I've got it to work, thanks to you.