CSS Height Issues

Discussion in 'Web Design and Development' started by monke, Mar 8, 2008.

  1. monke macrumors 65816

    monke

    Joined:
    May 30, 2005
    #1
    Its been a while... :eek:

    I've got this website I'm working on, and I'm currently stuck trying to figure it out. I've tried *almost* everything.

    The template is centered in the browser, and look like so:
    |---------Header---------|
    |---------Content---------|
    |---------Footer---------|

    The header and footer are just images and have absolutely nothing in them.

    The problem: The content varies from page to page, some pages require more room than others. The height is only a pixel value right now that fits the biggest page, but has too much 'white space' on the lesser content pages.

    Is there any way to make the content height differ from page to page and fit the actual content?
    Instead of pixel values I've tried 100%, inherit, and auto, but none have worked.
    :confused:
     
  2. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
  3. digitalField macrumors regular

    Joined:
    May 21, 2004
    Location:
    portland
    #3
    gonna echo Chico's comments.. would to see the code, will make it easier to give proper feedback.


    M!
     
  4. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #4
    I've tried leaving it blank, but no success.

    Here's the code:
    HTML:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test Page</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="header">
    </div>
    <div id="content">
    	<ul id="nav">
        	<li id="1"><a href="#"></a></li>
            <li id="2"><a href="#"></a></li>
            <li id="3"><a href="#"></a></li>
            <li id="4"><a href="#"></a></li>
            <li id="5"><a href="#"></a></li>
        </ul>
      <div id="left">
      </div>
      <div id="right">
      </div>
    </div>
    <div id="footer">
    </div>
    
    </body>
    </html>
    Code:
    @charset "UTF-8";
    /* ©  */
    
    * {
    	margin: 0px;
    	padding: 0px;
    }
    
    body {
    	font-family: Helvetica, Arial, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	background: #736357;
    }
    
    #content {
    	margin-top: -1px;
    	margin-bottom: -1px;
    	margin-left: auto;
    	margin-right: auto;
    	background: url(images/bookbody.jpg) repeat-y;
    	width: 848px;
    	height: 400px;
    }
    
    #heaeder {
    	margin-left: auto;
    	margin-right: auto;
    	background: url(images/booktop.jpg) no-repeat;
    	height: 18px;
    	width: 848px;
    }
    
    #footer {
    	margin-left: auto;
    	margin-right: auto;
    	background: url(images/bookbottom.jpg) no-repeat;
    	height: 14px;
    	width: 848px;
    }
    
    #nav {
    	margin-top: 40px;
    	position: absolute;
    	margin-left: 814px;
    	background: url(images/tabs2.jpg) no-repeat;
    	width: 89px;
    	height: 192px;
    }
    
    	#nav li {
    		position: absolute;
    		display: block;
    		list-style-type: none;
    		width: 100%;
    		height: 100%;
    	}
    	
    	#nav a {
    		display: block;
    		width: 100%;
    		height: 100%;
    	}
    	
    		#nav #1 {
    			margin-top: 15px;
    			margin-left: 7px;
    			background: url(img no-repeat;
    			width: 42px;
    			height: 22px;
    		}
    		
    			#nav #1 a:hover {
    				background: url(img) no-repeat;
    			}
    			
    			#nav #1 a:active {
    				background: url(img) no-repeat;
    			}
    			 
    #leftpage {
    	position: absolute;
    	margin-left: 45px;
    	width: 375px;
    }
    
    #rightpage {
    	float: right;
    	position: static;
    	margin-right: 45px;
    	width: 375px;
    }
    
    I slimmed it down so you don't have to waste your time reading extra code.

    The only two solutions I can think of that might work:
    1) Put a wrapper around the header, content, and footer
    2) The navigation is positioned absolutely, might pose a problem

    Any solutions? :(
     
  5. Kaliemon macrumors member

    Joined:
    Apr 30, 2006
    #5
    Here's a suggestion that is working on other sites I have made.

    Change

    to

    #content {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: url(images/bookbody.jpg) repeat-y;
    width: 848px;
    }

    If it doesn't work I will go through all the code again.

    Also, don't know if this is just in posting but

    should be

    #header { you have an extra 'e' in there, it doesn't affect the content though.
     
  6. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #6
    Thanks, but I still can't get it to work.

    I've tinkered with it a bit, but all I can get is one half to fit. What will happen is that on one page the content on the left is more then the right, so it works, but if the content on the right is more then it overflows the div and past where it should should. The div won't expand to occupy both.

    ex:
    Working (if left has more content then right):
    |--Left--||--Right--|
    ________________

    Not Working (if right has more content):
    |--Left--||--Right--|
    ________________
    |--Right--|

    I can get them both to work and the background to fit the content, but then the divs don't line up side-by-side.
    :mad:
     
  7. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #7
    I think you need to post your full code. Hard to debug with half the info. From what I see you have a height on the content, but 'no content, so how are we to know what you are asking :)
     
  8. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #8
    Here's all the code:

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="headspace">
    </div>
    
    <div id="wrapper">
    
    <div id="top">
    </div>
    <div id="content">
    	<ul id="tabs">
        	<li id="howto"><a href="#l"></a></li>
            <li id="definitions"><a href="#"></a></li>
            <li id="help"><a href="#"></a></li>
            <li id="about"><a href="#"></a></li>
            <li id="contact"><a href="#"></a></li>
        </ul>
        <div id="leftpage">
        	<div id="pagespace">
                <p class="title">
                Welcome
                </p>
            </div>
      </div>
      <div id="rightpage"> 
            <div id="pagespace">
             <p class="title">
                Test
                </p>
            </div>
      </div>
    </div><!--#bookwrapper-->
    <div id="bottom">
    </div>
    
    </div>
    
    </body>
    </html>
    
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    * {
    	margin: 0px;
    	padding: 0px;
    }
    
    body {
    	font-family: Helvetica, Arial, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	background: #736357;
    }
    
    a {
    	color: #55422d;
    	font-weight: bold;
    }
    
    .title {
    	font-size: 18px;
    	font-weight: bold;
    	color: #745b3d;
    }
    
    #headspace {
    	height: 25px;
    	width: 100%;
    }
    
    #wrapper {
    	margin-left: auto;
    	margin-right: auto;
    	width: 848px;
    }
    
    #top {
    	background: url(images/top.jpg) no-repeat;
    	height: 18px;
    	width: 848px;
    }
    
    #content {
    	background: url(images/body.jpg) repeat-y;
    	width: 848px;
    	min-height: 300px;
    }
    
    #bottom {
    	background: url(images/bottom.jpg) no-repeat;
    	height: 14px;
    	width: 848px;
    }
    
    #tabs {
    	margin-top: 40px;
    	position: absolute;
    	margin-left: 814px;
    	background: url(images/tabs2.jpg) no-repeat;
    	width: 89px;
    	height: 192px;
    }
    
    	#tabs li {
    		position: absolute;
    		display: block;
    		list-style-type: none;
    		width: 100%;
    		height: 100%;
    	}
    	
    	#tabs a {
    		display: block;
    		width: 100%;
    		height: 100%;
    	}
    	
    		#tabs #howto {
    			margin-top: 15px;
    			margin-left: 7px;
    			background: url(images/tabs/howto/howto.jpg) no-repeat;
    			width: 42px;
    			height: 22px;
    		}
    		
    			#tabs #howto a:hover {
    				background: url(images/tabs/howto/hover.jpg) no-repeat;
    			}
    			
    			#tabs #howto a:active {
    				background: url(images/tabs/howto/click.jpg) no-repeat;
    			}
    			
    #leftpage {
    	margin-left: 45px;
    	width: 375px;
    }
    
    #pagespace {
    	margin: 0px 15px 0px 15px;
    	padding-bottom: 10px;
    }
    
    #rightpage {
    	margin-left: 425px;
    	width: 375px;
    }
     
  9. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #9
    The problem is is that when I float one page, the background will stick with the non-floated page, thus why if the floated side had more content it won't work.

    I can't find solutions anywhere. :mad:


    The whole reason I NEED it to fit the content is that different browsers will interpret it different. I had a fixed size per page system working earlier until I tried it with Firefox and IE.
     
  10. digitalField macrumors regular

    Joined:
    May 21, 2004
    Location:
    portland
    #10
    Two things.
    One.
    Can you post your the URL to where you are hosting these files? Right now your CSS document references background images at this location 'images/tabs/howto/howto.jpg' which is nice, but makes it hard to test on my box here... do you have the url information that precedes it?

    Two.
    So im having a little trouble deciphering what the problem is.. or moreso what the end goal is... so im gonna take a couple stabs and let me know if im getting this right..

    you have a main div that holds your content. in that content you have your navigation, a rightpage and a left page...

    i assume the navigation will remain fairly consistent, but the left/right pages content will vary in height. ( FYI i noticed that you have the id 'pagespace' defined in both leftpage and rightpage, if you are going to use pagespace twice turn it inot a class )
    so with both your page heights variable.. it sounds like you want a background image to also stretch with them? are they separate backgrounds for each the left and right page? or is it the same one?
    maybe you can provide a screenCap of what the desired effect is suppose to be.

    M!

    ps. if you are floating div's, dont forget that you will need to clear them as well.
     
  11. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #11
    I actually solved my problem last night, but forgot to post it.

    All I did was create a new div to place the two floated divs (leftpage and rightpage) and added the "overflow: hidden" tag and it worked.

    Clear them? :eek:
     
  12. digitalField macrumors regular

    Joined:
    May 21, 2004
    Location:
    portland
    #12
    Yea. Clearing a float is just a method for making sure that content *after* the floated element goes back into the flow of the html document.

    Here is a great tutorials on it, as they do a much better job explaining it then i do.

    http://css.maxdesign.com.au/floatutorial/
    http://css.maxdesign.com.au/floatutorial/clear.htm

    M!
     

Share This Page