SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Absolute Div within a Relative Div

    Hi all,

    I'm working on a Javascript (Outlook style) calendar, and all is well apart from one thing.

    ok I have something like below:

    Code:
    <div class="calendar" style="width: 600px;">
    	
    	<div style="position: absolute; width: 100%; border-left: solid 5px blue; border-right: solid 1px #666; border-top: solid 1px #666; border-bottom: solid 1px #666; background-color: #fff; margin-left: 50px">This is a test</div>
    
    	<table width="100%" cellspacing="0" cellpadding="0" border="1" style="border: solid 1px #666">
    		
    		<tr>
    			<td rowspan="2" width="50px">12 am</td>
    			<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<td>&nbsp;</td>
    		</tr>		
    		<tr>
    			<td rowspan="2">1 am</td>
    			<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<td>&nbsp;</td>
    		</tr>		
    		<tr>
    			<td rowspan="2">2 am</td>
    			<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<td>&nbsp;</td>
    		</tr>
    
    	</table>
    </div>
    For some strange reason, although the parent element has a pixel width, the 100% div inside the main div is overflowing.

    In firefox, the absolute div is the same width as the viewport (produces horizontal scrolls) and in IE it overflows by the 25px margin I set. So it is really 100% of the parent element.

    Any idea's?

    Gav


  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to set position:relative on the outer DIV to make it the containing block for the absolutely positioned inner DIV.

    Then you have set the width of the inner DIV to 100% and then added 6px of borders (5px on the left, 1px on the right). So the inner DIV will be 100% + 6px.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've set the outer div to position: relative which has solved the Firefox issue but it still leaves a overflow.

    Both IE and Firefox have a overflow (ie = 25px and ff > 25px)

    Thanks


  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply. Everything is generated via Javascript, and the positions (top, left) are all set when I create the div's.

    If I were to generate the table using standard html code and then append the div's to it I am sure I could work out the width and programatically set it. But a requirement is that I create an object and write it and it does all the work.

    I could possibly find away around it, but this will be tomorrow morning as I am at home now.

    Thank you again



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
  •