I am trying to write a practice slider file and in doing the layout I have two problems with CSS.
I would like to align the DIV that holds the controls exactly under the slide show box with out using the left margin in the CSS style if possible and secondly move the right arrow to the right side of the control DIV.
I am hoping someone can take the time to show me how to do this.
The code follows:

<!DOCTYPE html>
        <title>Practice jQuery slider and gallery</title>
            html, body{
                width: 100%;
                height: 100%;
                margin: 0 auto;
                font-family: 'PT Sans Narrow', Arial, sans-serif;
                background-color: #DEDEDE;
                color: red;

                margin: 0 auto;
                width: 860px;
                height: 95px;
                background-color: #FAF6FA;
                background: #ffffff;

                position: absolute;
                top: 0px;
                left: 80px;
                /*    margin: 0 auto; */
                width: 885px;
                height: 970px;
                background-color: #EFEFEF;
                border-color: silver;

                position: relative;
                width: 640px;
                height: 500px;
                margin: 150px auto 0;
                background-color: #F5F5F5;
                border:1px solid #FFFFFF;

                -moz-box-shadow:0 0 22px #111;
                -webkit-box-shadow:0 0 22px #111;
                box-shadow:0 0 22px #111;
                position: relative;
                width: 640px;
                height: 34px;
                margin: 0 0 0 120px;
                border: 1px solid red;

                background: url('cssimages/arrowLeft.png') no-repeat;
                width: 32px;
                height: 32px;
                border: 1px solid green;
                display: inline-block;

                background: url('cssimages/arrowRight.png') no-repeat;
                width: 32px;
                height: 32px;
                border: 1px solid green;
                display: inline-block;
                font: 30px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
                text-align: center;
                padding-top: 10px;
        <div id="container">
            <div id="header">
                <h1>Practice jQuery Slider and Gallery</h1>
            <div id="slideShowBox">

            <div id="slideShowBoxControlls">
                <div id="arrowLeft"></div>
                <div id="arrowRight"></div>

I found float right and float left works well for the arrow boxes, but what is the best way to align the whole controll boxes without margins?

Not clear for without margins. What mean without margin ? You've no way to move the layer without using margin, padding, or top, right, bottom, left with position (absolute or relative). You might be involved with those method to align the layer.

Anyway, I don't know exactly what you're meaning. Need more brief explain.

Visually, I want slideShowBoxControlls to be either inside slideShowBox at the bottom, or sitting exactly below slideShowBox. Right now I positioned slideShowBoxControlls out side slideShowBox and used left margin to adjust the position, but it seems to be a few pixels off. I was hoping to find a better way to do this.