CODEWITHSUNDEEP
htmlcss
user311509
user311509

Reputation: 2866

Position Changes due to Resolution

The current mockup UI only works (as expected) in Firefox.

I have a white border that is positioned differently based on screen resolution.

In 800 x 600 and 1024 x 768, the border aligned little bit to the left:

enter image description here

enter image description here

In 1280 x 1024, it appears as i want it, centered:

enter image description here

The HTML snippet is:

 <div id="comment_middle">
        <a id="topcomment"></a>
        <div id="comment_top"><center><p id="commentshdr">عدد الردود: 0</p></center></div>
          <div id="commentcontent">
               <div id="no_comments"><center><b><font color="purple" size="4">لاتوجد ردود</font></b></center></div>
                </div>
           
                    
        <a id="posted"></a>
           <div id="maincmnt">
               <p>الــرد على الموضوع</p>
               <fieldset>
               <form action="po.php?id=499#posted" method="POST">
                    <!--<input type="hidden" name="posted" value="#posted" />-->
                    <input name="id" value="499" type="hidden">
                    <input name="page" value="1" type="hidden">
                    <textarea rows="20" cols="60"></textarea><br>
                    <div id="replybutton_content">
                        <div id="userbadge-register"><center><a href="#" target="_blank">سجل في الموقع الآن لتستطيع التواصل مع العضو</a></center></div>
                    </div>               </form>
               </fieldset>
           </div>

        <div id="comment_bottom"></div>
    </div>

I enclosed a div that collects all the divs mentioned above to be able to move the whole set at once because the border is sliced into several parts, so i need some sort of div to collect them:

<div style="margin-right: 20%;">
//the above html block
</div>

I changed different sizes as margin-right: 20%, padding-right, etc. There always an extra alignment in one of screen resolution. For example, if border is centered in 1280 x 1024, the border in smaller resolution aligns to the left. If border is centered in smaller resolution, the border align to the right in 1280 x 1024. I want them all to appear in same position of snapshot #3. Any idea how to solve the issue?

Thanks.

Upvotes: 2

Views: 514

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

You need an outside wrapper for your whole content area. Give it a fixed with (assume it's 960):

.wrapper {
    width:960px;
    margin-left:auto;
    margin-right:auto;
}

Upvotes: 0

szym
szym

Reputation: 3198

Try this on the div#comment_middle

<div id="comment_middle" style="margin: 0 auto;">

and delete the margin on it's parent.

Upvotes: 1

Related Questions