SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div element positioning

    Dear All,
    I have problem here I have two div as below

    [CODE <div id="left" style="top:0px;left:0px; width:150px;">
    <div id="title1" style="top:auto;left:0px; padding: 4px; overflow: auto; background-color: #8EB4E3;">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td></td>
    </tr>

    <tr>
    <td>OUR SYSTEM</td><td width="11%" height="10"><div align="right"><img src="../fleet/images/logos/<?=$fleetID?>.png" width="100" height="50" /></div></td>
    </tr>
    </table>
    </div>
    </div>
    <div id="right" style="top:0px;left:250px; width:800px; height:100%">Map goes here.
    </div>[/CODE]
    The problem I am having is that when the div id="left" does not have any inner div then the right div where it contains map is at 0px. But the moment I put id="title1" in the div id="left" then the map in div id="right" does not stay at the top 0px and it goes down by quite many pixels. Any solution to this please? Thank you.

  2. #2
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it kind of style/align problem?
    You want a solution by javascript? Or rather a css solution?

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Bulevardi,
    I dont mind as long any method works. Thank you.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works with this:

    (you should check the CSS/html forums, for laying out DIVs)
    Code HTML4Strict:
     
     
    <html>
    <head>
    <title></title>
     
    <style>
     
    #left { float: left; width: 150px; }
    #right { float: left; width:800px; height:100%; }
     
    /* 
     you can add the following
     display: block; or dispay: inline;
     you can position relative to tags above, or position absolute to the viewport, or to the tags that are relative.
     position: absolute; position: relative;
    */  
     
    #title1 { padding: 4px; overflow: auto; background-color: #8EB4E3; }
     
     
    </style>
    </head>
    <body>
     
     
     
     
    <div id="left">
    <div id="title1">
     
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td></td>
    </tr>
     
    <tr>
    <td>OUR SYSTEM</td><td width="11%" height="10">
    <div align="right"><img src="../fleet/images/logos/<?=$fleetID?>.png" width="100" height="50" /></div>
    </td>
    </tr>
    </table>
     
    </div>
    </div>
     
    <div id="right">Map goes here.</div>
     
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •