DiV possitioning

**drhowarddrfine** · Jan 16 '09, 08:20 PM

The left margin on the parent <div> is doing this.

**pluciorx** · Jan 16 '09, 09:12 PM

the code of main page is :

(i cut not some heads)

Code:

<body bgcolor="#FFFFFF" text="#000000">


    <form id="form1" runat="server">
<div id="container">
<div id="wb_" 
        style="overflow:hidden;position:absolute;left:109px;top:7px;z-index:2; height: 168px; width: 541px;" 
        align="left">
<img src="images/visual-compbann.jpg" id="" alt="" align="top" border="0" style="width:541px;height:168px;"></div>
<div id="wb_" style="position:absolute;left:798px;top:0px;width:3px;height:999px;z-index:3" align="left">
<img src="images/img0002.gif" id="" align="top" alt="" title="" border="0" width="3" height="999"></div>
<div id="wb_" 
        style="position:absolute;left:0px;top:999px;width:800px;height:0px; z-index:4" 
        align="left">
<img src="images/img0003.gif" id="" align="top" alt="" title="" border="0" width="800" height="2"></div>
<div id="wb_" style="position:absolute;left:0px;top:0px;width:101px;height:178px;z-index:7" align="left">
<img src="images/img0013.png" align="top" alt="" border="0" width="102" 
        height="102" 
        
        
        style="position:absolute;left:0px; top:10px; width:102px;height:102px;z-index:19"><asp:Image 
        ID="Image7" runat="server" ImageUrl="~/images/columnleft.jpg" />
    </div>
<div id="wb_" style="position:absolute;left:548px;top:0px;width:250px;height:171px;z-index:8" align="left">
<img src="images/img0007.gif" id="" align="top" alt="" title="" border="0" width="250" height="171"></div>
<div id="wb_" 
        style="position:absolute;left:340px; top:121px; width:269px; height:42px;z-index:10" 
        align="left">
<font style="font-size:35px" color="#000080" face="Tahoma"><b>IT Zone Expert</b></font></div>
<div id="wb_" style="position:absolute;left:102px;top:171px;width:698px;height:2px;z-index:11" align="left">
<img src="images/img0009.gif" id="" align="top" alt="" title="" border="0" width="698" height="2"></div>
<div id="wb_" style="position:absolute;left:105px;top:984px;width:676px;height:12px;z-index:15" align="center">
<font style="font-size:9.3px" color="#000080" face="Verdana"><b>Copyright © 2008 by &quot;IT Zone Expert&quot;&nbsp; ·&nbsp; All Rights reserved&nbsp; ·&nbsp; E-Mail: <a href="mailto:info@itzoneexpert.co.uk" class="style1">info@itzoneexpert.co.uk</a></b></font></div>
<div id="wb_" style="position:absolute;left:123px;top:979px;width:652px;height:2px;z-index:18" align="left">
<img src="images/img0012.gif" id="" align="top" alt="" title="" border="0" width="652" height="2"></div>
&nbsp;<div id="wb_Html1" style="position:absolute;left:112px;top:922px;width:270px;height:20px;z-index:21" align="left">
    <div style="position: absolute; top: -737px; left: 16px; height: 104px; width: 644px; margin-left: 0px;" 
        align="left">
    
        <asp:ImageButton 
            ID="homebutt" runat="server" BorderStyle="None" 
            ImageUrl="~/images/Home-cien2.jpg" ImageAlign="Left" onclick="homebutt_Click" 
            PostBackUrl="~/index.aspx" style="height: 20px" />
        <asp:ImageButton ID="logbutt" runat="server" BorderStyle="None" 
            ImageUrl="~/images/log in2.jpg" CausesValidation="False" 
            ImageAlign="Left" PostBackUrl="~/login.aspx" />
    
        <asp:ImageButton ID="regbutt" runat="server" BorderStyle="None" 
            CausesValidation="False" ImageAlign="Left" 
            ImageUrl="~/images/register.jpg" PostBackUrl="~/register.aspx" />
        <asp:ImageButton ID="servbutt" runat="server" BorderStyle="None" 
            CausesValidation="False" ImageAlign="Left" 
            ImageUrl="~/images/services.jpg" PostBackUrl="~/services.aspx" />
        <asp:ImageButton ID="conbutt" runat="server" BorderStyle="None" 
            CausesValidation="False" ImageAlign="Left" ImageUrl="~/images/contact.jpg" 
            PostBackUrl="~/contact.aspx" />
        <asp:ImageButton ID="clibutt0" runat="server" BorderStyle="None" 
            CausesValidation="False" ImageAlign="Left" 
            ImageUrl="~/images/our clients.jpg" PostBackUrl="~/clients.aspx" />
        <asp:ImageButton ID="ImageButton1" runat="server" BorderStyle="None" 
            CausesValidation="False" ImageAlign="Left" 
            ImageUrl="~/images/tech news.jpg" PostBackUrl="~/news.aspx" />
        <asp:ImageButton ID="logoutbutt" runat="server" BorderStyle="None" 
            ImageAlign="Left" ImageUrl="~/images/logout.jpg" 
            CausesValidation="False" Visible="False" onclick="logoutbutt_Click" 
            PostBackUrl="~/index.aspx" />
        
<div id="wb_0" 
        style="position:absolute;left:88px; top:41px; width:498px; height:41px; z-index:20; color: #0000FF;" 
        align="center">
<font style="font-size:24px" color="#FFFFFF" face="Verdana"><b>Welcome To Our IT 
    Services World</b></font></div>
        
        <img alt="menu background" src="images/ramka-wypelnienie.jpg" 
            
    
            style="border-style: none; width: 640px; height: 79px; position: absolute; top: 20px; left: 0px;" /></div>
<!-- 1and1 -->
<a href="http://1and1.co.uk/xml/init/?k_id=14272244" target="_blank"><img src="http://banner.1and1.co.uk/xml/banner?size=2&number=4" width="350" height="50"  border="0"/></a></div>
<div id="wb_JavaScript1" 
        style="position:absolute;left:678px;top:23px; width:100px;height:64px; z-index:22" 
        align="left">
<font style="font-size:12px;font-family:Arial;" color=#000000>
<div id="basicdate">
</div>
</font>
<script language="JavaScript" type="text/javascript">
   var now = new Date();
   var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
   var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
   var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
   var year = (now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear();

   today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + year;

   basicdate.innerHTML = today;
</script>


</div>
<div id="wb_JavaScript2" 
        style="position:absolute;left:679px; top:97px; width:100px;height:13px; z-index:23" 
        align="left">
<font style="font-size:12px;font-family:Arial;" color=#000000>
<div id="basicclock">
</div>
</font>
<script language="JavaScript" type="text/javascript">
function clock() 
{
   var digital = new Date();
   var hours = digital.getHours();
   var minutes = digital.getMinutes();
   var seconds = digital.getSeconds();
   var amOrPm = "AM";
   if (hours > 11) amOrPm = "PM";
   if (hours > 12) hours = hours - 12;
   if (hours == 0) hours = 12;
   if (minutes <= 9) minutes = "0" + minutes;
   if (seconds <= 9) seconds = "0" + seconds;
   dispTime = hours + ":" + minutes + ":" + seconds + " " + amOrPm;

   basicclock.innerHTML = dispTime;
   setTimeout("clock()", 1000);
}
clock();
</script>

</div>
<div id="wb_Image1" style="overflow:hidden;position:absolute;left:112px;top:879px;z-index:24" align="left">
<a href="http://www.amazon.co.uk/gp/homepage.html/278-3895167-9896403?ie=UTF8&placement=home%5Fmulti.gif&tag=itma-21&link%5Fcode=hom"><img src="images/amazon-logo-151x32__V45462390_.gif" id="Image1" alt="" align="top" border="0" style="width:151px;height:32px;"></a></div>
<div id="wb_Image2" style="overflow:hidden;position:absolute;left:278px;top:865px;z-index:25" align="left">
<a href="http://www.dabs.com/homepage.aspx"><img src="images/dabs_logo.gif" id="Image2" alt="" align="top" border="0" style="width:158px;height:52px;"></a></div>
<div id="wb_Image3" style="overflow:hidden;position:absolute;left:448px;top:867px;z-index:26" align="left">
<a href="http://www.misco.co.uk/?sourceid=2003"><img src="images/misco_logo.gif" id="Image3" alt="" align="top" border="0" style="width:159px;height:49px;"></a></div>
<div id="wb_Image4" style="overflow:hidden;position:absolute;left:622px;top:871px;z-index:27" align="left">
<a href="http://www.microdirect.co.uk/?source=TradeDoubler"><img src="images/microdirect.gif" id="Image4" alt="" align="top" border="0" style="width:165px;height:31px;"></a></div>
<div id="wb_Image6" style="overflow:hidden;position:absolute;left:470px;top:920px;z-index:31" align="left">
<a href="http://www.bybrook-barn.co.uk/"><img src="images/bbarnlogo.jpg" id="Image6" alt="" align="top" border="0" style="width:321px;height:53px;"></a></div>
</div>
 
    
 
    <div style="position: absolute; top: 298px; left: 20%; width: 611px;">
    <table style="width: 100%; height: 551px;">
        <tr>
            <td class="style6">
                &nbsp;
        <asp:Image ID="Image5" runat="server" ImageUrl="~/images/itzex2.gif" />
            </td>
            <td class="style7">
               <font style="font-size:13px" color="#00008B" face="Verdana">We provide a wide 
                range of computer services at reasonable prices in South Kent and surrounding 
                areas (including Central London). We specialise in Computer <u><a href="./services.aspx" class="style1">
                SERVICES</a></u><b>,</b> our personnel offer high quality and reliable advice on 
                how to prevent future problems occurring. In addition, our friendly and 
                professional staff are here to answer any questions you may have about <br>
                our company or our services.</font></td>
        </tr>
        <tr>
            <td class="style5">
                <font style="font-size:13px; text-align: center;" color="#00008B" 
                    face="Verdana">We offer a <u>services</u>:<br>
* Advise on What? Where? How? to buy or upgrade&nbsp; your <br>
 computer, multimedia equipment and software;<br>
* Security check, especially for wireless network (only in<br>
 Ashford and South Kent areas);<br>
* How to reduce your costs using a full range <u><a class="style1" 
                    href="http://www.freeweboffice.co.uk/">Free and low costs programs </a></u>
  e.g. Office applications,<br>
 web online and portable programs - Software As A Services - <i>SAAS or Cloud Computing</i>;</font></td>
            <td class="style3">
                
            <asp:Image ID="Image8" runat="server" ImageUrl="~/images/itzex3.gif" 
                    style="text-align: right" />
            </td>
        </tr>
        <tr>
            <td class="style4" colspan="2">
                &nbsp;
                &nbsp;
            <font style="font-size:13px" color="#00008B" face="Verdana">Whether you need <b><i>SERVICE, ADVICE</i></b> or a <b><i>SOLUTION</i></b>, we have what you need at prices you can afford. Just <b><i>visit </i></b>our <b><i>Computer Service and Repair Centre</i></b>, <b><i>Ashford</i></b>, Kent in Bybrook Barn Garden Centre.<br>
At <b><i>IT Zone Expert</i></b>, our goal is to provide you with courteous, expedient, professional service of the highest caliber. Browse our Web site for more information about IT Zone Expert. </font>
                <font style="font-size:13px" color="#000000" face="Verdana">
<br>
</font><font style="font-size:13px" color="#00008B" face="Verdana">If you have any questions or would like to speak with our representative regarding our services, please call: 07886 007977 , e-mail us at <u><a href="mailto:info@itzoneexpert.co.uk" class="style1">info@itzoneexpert.co.uk</a></u></font></td>
        </tr>
    </table>
    &nbsp;* * * * * * * * 
</div>
 
    </form>
    </body>
</html>

i can't even find a parrent div here

**serdar** · Jan 18 '09, 02:19 AM

Can you please explain why are you enclosing all markup in a form element (<form>...</form>)? It looks definitely invalid to me.

It would be best to markup the document from scratch, but for a temporary solution:

You don't need to use absolute positioning in your divs. Just put the rest of your divs in your container div (<div id="container"> ) and remove absolute positioning.

I mean something like:

Code:

<div style=" margin: 297px 0 0 140px; width: 611px;">

instead of

Code:

<div style="position: absolute; top: 297px; left: 367px; width: 611px;">

(I suppose this div starts at line #144 in the code you posted above.)

**pluciorx** · Jan 18 '09, 05:32 PM

it is an aspx so the form is running at server the someone else write this file and left company, i will try today and post results

DiV possitioning

DiV possitioning

Comment

Comment

Comment

Comment