SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    auto height for content area

    So, I've tried making the making the content area on a page adjust to the height of the content. I tried using the height property and setting it to 100% but it just messes up the page. I can only get the page to work if I use a set px height.

    #MainContent {
    width:1024px;
    height: 100%;
    background-color:#fff;
    margin:0 auto;

    }

    http://newstartlaw.com/

    Any suggestions?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,231
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Has anyone told you that your html is a disaster?

    http://validator.w3.org/check?uri=ht...up=0&verbose=1

    Clean it up and the site might have a chance.

    height:100% is not a valid value for height in this location; px would be. 100% of what? What are you trying to do?

    Why is the footer floating beside that "New Start" message? A clue: your html is badly broken. Fix that, then call us back.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think its that bad. A lot of those error messages are related to code generated by wordpress. Well, if anyone is capable of helping then just let me know.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,737
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    So, I've tried making the making the content area on a page adjust to the height of the content.
    this happens by default. what is it that you really want to happen?
    I tried using the height property and setting it to 100% but it just messes up the page.
    Setting the height to 100% sets that element to the height of the PARENT element IF (and only if) that parent element has a set height. Also remember that 100% height will overflow or cause scroll bars if you ad vertical padding or margins on top of the 100% height.

    In short, you need to declare a fix height somewhere , before you use %





    Any suggestions?

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response dresden_phoenix.

    So, what I do want is the #BelowHeaders section to adjust according to the content within it.

    So, I set the #MainContent height to 4000px which is what I had it at originally, but the problem is that I have too much blank space at that height. I need more height on some pages vs others. However, I'd just like it to adjust according to the content in the #MainContent area which is most likely dictated by the content in the


    #MainLeftcontent {
    width: 625px;
    float:left;
    padding-left:2%;

    }

    since the #RightNav height won't change that much. However, just like you said ( dresden_phoenix)

    Setting the height to 100% sets that element to the height of the PARENT element IF (and only if) that parent element has a set height.
    the #rightNav is following the behavior and I'd like to do the same for the #MainLeftcontent as a whole.



    #BelowHeaders {
    background:url("http://newstartlaw.com/wp-content/themes/New%20Start%20Law/images/bodybackground.jpg");
    width:100%;

    }


    #MainContent {
    width:1024px;
    height: 4000px;
    background-color:#fff;
    margin:0 auto;

    }



    #RightNav {
    float:right;
    background-color:#545454;
    width:299px;
    height:100%;
    list-style-type:none;

    }

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,608
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Hey Brian, try removing the height from #MainContent and instead add this:

    Code:
    #MainContent {
      overflow: hidden;
    }

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,737
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    what you want (technically) really cant be accomplished with divs/css. It's not the way they work.

    Now, what you want aestetically9 unless my understanding is off is EQUAL HEIGHT COLUMNS ( tongs of tutorials on that out there ) Basically there are TWO WAYS.


    First we get rid of those height declarations, as i said before that not the way DIVs and CSS work.
    then you create a SMALL bg graphic which you will assign to the container of both your divs, and repeat vertically. That really is the easiest way.

    Another technique involves creating separate wrapping shells ( wrapped around ll your content) for each BG change as such:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    				.mainCont{background: #555; overflow:hidden;padding-right:250px;}
    				.inner{ background:pink;   width:100%;}
    				.left , .inner{float:left; width:100%;}
    				.right{float: right; width:250px; margin-right: -250px; }
    		</style>
    	</head>
    	<body>
    		<div class="mainCont">
    			<div class="inner">
    				<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    				<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	lore	</div>
    		</div>
    		</div>
    	</body>
    </html>
    hope that helps

  8. #8
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well. the

    #MainContent {
    overflow: hidden;
    }


    worked for the most part.

    I had to also apply the "overflow:hidden;" to the

    #BelowHeaders {
    background:url("http://newstartlaw.com/wp-content/themes/New%20Start%20Law/images/bodybackground.jpg");
    width:100%;
    overflow: hidden;


    }

    too.

    However, it gives me a new issue with the #RightNav not filling its container which is the #MainContent. Why is that?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,608
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by BrianBam View Post
    it gives me a new issue with the #RightNav not filling its container which is the #MainContent. Why is that?
    That's the natural behvior of an element—to be just as tall as the content. The best option here is to use the faux column method to make it appear that the column is full height.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,231
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's the natural behvior of an element—to be just as tall as the content. The best option here is to use the faux column method to make it appear that the column is full height.
    per Ralph's recommendation:

    add the following code to #MainContent
    Code:
    #MainContent {
        background-color:#fff;
        background-image:url("../images/rightnav-bg.png");  /* you may have to adjust the path */
        background-repeat:repeat-y;
        background-position:right 0;
        width:1024px;
        overflow:hidden;
        margin:0 auto;
    }
    and place this image in your images directory

    rightnav-bg.png


Tags for this Thread

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
  •