Aligning two divs next to each other... (with no space between!)

When I was trying to aligning two divs next to each other
with no space between them on FireFox I wasnt having any trouble
But when I looked on the Explorer it showed me the second div under the first one…
This is the code I used:

.borders{width:800px; height: 530px;}
.flashborder{background: url(Other.jpg); width:355px; height: 530px;  position: relative; float:left }
.machineborder{background: url(Machine.jpg); width:445px; height:530px; position: relative; float: right; }

Why does that happan?
the only way I could make them be next to each other on Explorer is when i changed
the Borders width to 810px but there was a space between the two divs.

How can I fix that?

Thanks in advance, Dan.

just saw it IE8 without problems. Which version are you referring too?

float the second one left… it should push it against the first one. also if you change the width on the overall div it should fix it (just make it 980px)… but the first solution offers more flexibility so use that first.

kenganquimby, That solved me the problem thank you!

donboe, I saw that problem on IE8

What solved the problem? floating both left or changing the width of the parent?

float them both left

yeah float both left…

Good it’s working, although it shouldn’t make any difference!

Off Topic:

You could do with some less CSS since most of the properties for flashborder and machineborder are similar. This would do:

	overflow: hidden;

.machineborder {
	 height: 530px;  
	 background: url(Other.jpg); 

	 background: url(Machine.jpg);

it works for that simple example, but wouldnt you want to keep them separate for more complex examples… in reality they only share 2 of the same rules… it would be far more flexible in a more complex css doc to keep them separate (unless of course they share a ton of properties)

No i wouldn’t in this case. It were 3 I took the position relative out. If I can combine I combine

I generally won’t make my child boxes exactly the width of their container. One pixel rounding error in some browser and then you’ve got the children on top of each other instead of next to each other.