javascript - Controls are not positioning correctly when displaying validation summary on top of web page -

i getting weird problem in using custom validator function in asp.net page , showing validation summary on top of web page using css styles.....

and screen shot before clicking button submit changes

after submitting page validation summary displayed on top controls positon changing

and code

    <div id="validationsummaryholder" class="validationsummaryholder">             <asp:validationsummary runat="server" id="valserrors" validationgroup="testvalidation" displaymode="bulletlist"                 cssclass="validationsummary" headertext="<div class='validationheader'>please correct following:</div>" />                 </div> 

and css styles validation summary

css styles validation summary

.validationheader  { background-color: white; color:green; height: 14px; font-weight: bold; border-bottom: 1px solid #b08b34; padding-top: 3px; } .validationsummary  { border: 1px solid #b08b34; padding: 0px 0px 0px 0px; margin:5px 0 20px 0px; font-size:12px; width:99%; } .validationsummary ul  { padding-top: 1px; font-size: 12px; color:#982b12; } .validationsummary ul li  { padding: 1px 0px 0px 1px; } 

i have placed controls in individual divs , mentioned type of positon controls relative ..

i don't know why getting weird thing, need set fixed height , width total page ? 1 pls on many in advance....

check width of

<div id="validationsummaryholder" class="validationsummaryholder"> 

it not the validation summary's insides causing of own accord since contained in div, maybe containing div stretching or shrinking page. html in question help. if can't paraphrase html here, option show wire frame of page , without validation summary , answer should clear @ point happening.