SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Next stop: PHP! Marina's Avatar
    Join Date
    Apr 2001
    Location
    Sweden
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Need a table to move when a layer expands

    I hope there is some way to make this layout work...
    What I want is for the layer to push the blue table lower down instead of covering it. Is there a way to do that without converting the layer to a table?

    Here's a draft of the layout:
    Attached Images Attached Images

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add float: left to all three elements ('TABLE', 'LAYER' and 'TABLE (footer)').
    Add clear: right to 'LAYER'.

    That should give you the result you want.

    Like so:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Untitled</title>
    <style type="text/css">
    
    body {
    	margin: 0;
    }
    
    #main {
    	width: 50%;
    	float: left;
    	background: #c00;
    }
    
    #push {
    	width: 50%;
    	float: left;
    	clear: right;
    	background: #f60;
    }
    
    #footer {
    	width: 100%;
    	height: 40px;
    	background: #fc0;
    	float: left;
    }
    
    </style>
    </head>
    <body>
    <table id="main">
    	<tr>
    		<td>TABLE<br />
    		push<br />
    		push<br />
    		push<br />
    		push</td>
    	</tr>
    </table>
    
    <div id="push">LAYER<br />
    	push<br />
    	push<br />
    	push<br />
    	push<br />
    	push<br />
    	push<br />
    	push<br />
    	push
    </div>
    
    <table id="footer">
    	<tr>
    		<td>TABLE (footer)</td>
    	</tr>
    </table>
    </body>
    </html>
    Last edited by Bill Posters; May 12, 2003 at 00:06.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    Next stop: PHP! Marina's Avatar
    Join Date
    Apr 2001
    Location
    Sweden
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the code Bill! For some reason I can't get it to work. I'll try again tomorrow. It usually helps getting a good night's sleep.

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only thing you need to bear in mind when using the above method is that the 'TABLE (footer)' is wider than the any space to the right of 'TABLE' and 'LAYER'.
    If the space is wider than the footer then the footer will slip back up and sit to the right of the 'LAYER'.

    've adjusted the above example to demonstrate things more clearly (using percentages instead of px values).
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    Next stop: PHP! Marina's Avatar
    Join Date
    Apr 2001
    Location
    Sweden
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just can't get it to work. There must be something wrong with the rest of my code on this page.


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
  •