CSS DIV container align multibrowser+unwanted margin
 

Hi,
[/CODE]
I'm trying to make a website using divs and CSS and I'm having some problemss that I just can't solve :S

1.I'm using a container DIV, to center the content, and in SAFARI everything falls apart.
2.in IE7 the second orange bar is too far from the bottom of the grey ones and in FIREFOX is less seen but, as i care for grids, I would like to make a 5px margin as everywhere else.

A JPG of the renders can be seen here: http://www.andresousa.eu/browser_screen.jpg

CSS USED

div#container{

        margin-left: auto;

        margin-right: auto;

        position: relative;

        width: 600px;

        display:block;

}



div#orange_bar {

        position: relative;

        width:600px;

        background-color: #D75600;

        height: 16px;

        margin-bottom: 0px;

}



div#content_left {

        display:table;

        position: relative;

        background-color:#353535;

        width: 110px;

        height: 110px;

        margin-top: 5px;

        

}



div#content_right {

        display:table;

        float:right;

        position: relative;

        background-color:#353535;

        width: 485px;

        height: 110px;

        bottom: 110px;

        margin-left: 0px;



}

HTML

<div id="container">



<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>

<div id="content_left"></div>

<div id="content_right"></div>

<div id="content_left"></div>

<div id="content_right"></div>



<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>

<div id="content_left"></div>

<div id="content_right"></div>



<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>

<div id="orange_bar"> <p>PHOTOGRAPHY</p></div>



</div>

Thanks a lot, I hope you can help me fixing this as I don't really wanna use tables.
Best regards.