SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Uruguay
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with layout and divs

    Hi
    I used the next design layout on my site: http://www.krishadlock.com/clients/i...erface/js.html

    This layout is a resizable Interface, this is the js code:
    Code:
    Page = {};
    
    Page.resize = function()
    {
    	var header = document.getElementById('header');
    	var footer = document.getElementById('footer');
    	var content = document.getElementById('content');
    	var left = document.getElementById('left');
    	var right = document.getElementById('right ');
    	
    	var contentHeight = document.body.offsetHeight - (header.offsetHeight + footer.offsetHeight) +"px";
    	content.style.height = contentHeight;
    	left.style.height = contentHeight;
    	right.style.height = contentHeight;
    }
    
    onload = onresize =Page.resize;
    css:

    Code:
    html, body
    {
    	margin: 0px;
    	height: 100%;
    }
    
    #header
    {
    	height: 100px;
    	background-color: #333;
    	color: #fff;
    }
    
    #content div#left
    {
    	width: 150px;
    	float: left;
    	background-color: #eaeaea;
    }
    
    #content div#gridDiv
    {
    	float: left;
    	margin-bottom:20px;
    }
    
    #footer
    {
    	background-color: #ccc;
    	clear:both;
    }
    html:
    Code:
    <body>
    	<div id="header">Header</div>
    	<div id="content">
              <div id="left">
               <br>Content Left<br>  
              </div>
    	  <div id="right">
                <div id="mydiv"></div>
              </div>
    	</div>
    	<div id="footer">Footer</div>
    </body>
    I have a problem when I got another div (mydiv) inside "right", this div's height changes because its innerhtml is modified on the fly, so sometimes the height of the div is overlapping the "footer", and I don't want this!
    So sometimes, "mydiv" must move "footer" div down
    Thx! And sorry about my english

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I really don't get why you are using javascript to resize the divs... It is not necessary at all! ... Plus for people without JS enabled, your page screws up.

    Just use plan old CSS.

    I would use one of Paul's excellent examples::

    http://www.pmob.co.uk/temp/2colfixedtest_4.htm

    This is just plain old CSS/HTML... the footer resizes with the window until it gets to the base of the content...

    Try it out.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Uruguay
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank JimmyP, you save my day! ( and mental health )


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
  •