Question

I have two divs sr-left-checks and sr-right-checks. they both contain unordered lists. The left one is floated. I can not figure out how to format the indentation of the lists. the one on the left is indented slightly more to the right then the lists on the right. margin or padding has no effect on the list elements to the right. I want them to line up equally.

CSS:

#content{
    width: 553px;
    padding:2px;
    margin: 0 auto;
    font-family: helvetica;
    font-size: 12.9px;
    line-height: 21px;
}


#center-content{
    padding:0px 15px;

}


#sr-left-checks{
    float: left;
    margin-left: 5px; /*why is this working*/
    margin-top: 20px;
    width: 279px;

}
#sr-right-checks{
    margin-right: 5px;
    margin-top: 20px;
    margin-left: 5px;
}

#sr-left-checks ul{
     margin: 9px 2px;
    padding: 0;
}

#sr-right-checks ul{
     margin: 9px 2px; /*not adding margin*/
    padding: 0;
}


#form-block{
    position:relative;

}

Markup:

<div id="content">

            <!--Center Content Div Starts -->

            <div id="center-content">


                <div id="form-block">


                        <!--Left Column Questions  Starts -->

                        <div id="sr-left-checks">


                            <div>

                                <div id="sr-dest-block" >question block</div>

                                <ul id="send-receive-destination">

                                    <li><input type="radio" name="dest" value="Internal" >Internal</li>

                                    <li><input type="radio" name="dest" value="External" >External</li>

                                </ul> 

                            </div>  

                            <div>

                                <div id="sr-frequency-block">question block</div>

                                <ul id="send-receive-frequency">

                                    <li><input type="radio" name="radFrequency" value="One time">One Time(Ad-hoc)</li>

                                    <li><input type="radio" name="radFrequency" value="Regularly">Regularly</li>

                                </ul> 

                            </div>  

                        </div>

                        <!--Left Column Questions  Ends -->


                        <!--Right Column Checks starts-->

                        <div id="sr-right-checks">

                            <div>

                                <div id="sr-datatype-block">question block</div>

                                <ul id="send-receive-datatype">

                                    <li><input type="radio" name="radDataType" value="Email content withouth attachment">Email</li>

                                    <li><input type="radio" name="radDataType" value="Email content withouth attachment">Email</li>

                                    <li><input type="radio" name="radDataType" value="Documents">Document</li>

                                    <li><input type="radio" name="radDataType" value="Custom Content">Custom content</li>

                                </ul> 

                            </div> 
                        </div>
                    </div>

                </div>                  
            </div>

Answer 1

To show whats going on, add this to the css

div{ border:red 1pt solid; }

change #sr-right-checks

#sr-right-checks{

    background:blue;

    margin-right: 5px;
    margin-top: 20px;
    margin-left:300px; /* is measured relative to the parent div */
}

http://jsfiddle.net/GsLMv/3/