SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2005
    Location
    Auckland, New Zealand
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    container div height not going to full content size

    Hey guys,

    Im having an issue where the container div is only going to the size of the screen and not the full size of the content... ive tried everything I can think of...
    im sure it cant be a difficult one to fix im just struggling... does anyone have an idea?

    http://www.dev.webtastix.net/rachaelmckenna/?page=books

    Code:
    relavent css
    #container {
    	width:100%;
    	max-width:1800px;
    	margin:0 auto;
    	position:relative;
    	padding:20px;
    	height:100%;
    	min-height:100%;
    	border:1px dashed black;
    }
    (have left the border there to show where the div is currently ending)
    statically setting the height works fine, but very limiting to a dynamic website

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Make sure to validate your HTML first, as you have some serious errors there. But also beware of absolute positioning, as it's a mongrel to work with.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Have you run your page through the validator?

    XHTML has an excellent validator. I REALLY think that would help.

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2005
    Location
    Auckland, New Zealand
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the only xhtml errors left now are the alt's missing from img's which wouldn't cause the problem sadly..
    and the css validator fully validates

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2005
    Location
    Auckland, New Zealand
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    But also beware of absolute positioning, as it's a mongrel to work with.
    ive converted the absolute's to relative but the container still is only the full size of the screen

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    There seem to be quite a few factors contributing to the layout problems. What do you actually want the layout to do, as it's better to backtrack at bit at this stage and rethink the layout. You've got positioning where you don't need it, unnecessary floats etc. that are just getting in the way.

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2005
    Location
    Auckland, New Zealand
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There seem to be quite a few factors contributing to the layout problems. What do you actually want the layout to do, as it's better to backtrack at bit at this stage and rethink the layout. You've got positioning where you don't need it, unnecessary floats etc. that are just getting in the way.
    the only reason I care that the container height is wrong is that the footer sits at the bottom of that, which means with it being wrong it means the footer is appearing crazily in the middle of the page on long pages

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ShaneLangley View Post
    the only reason I care ...
    Whatever the reason, I stand by my comment above. There's not one simple factor breaking the layout, which is why I suggest looking at the needs of the page layout and looking at a better option for getting what you want.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    ditto @ralph.m

    This page begs for a do-over from scratch.

  10. #10
    SitePoint Zealot
    Join Date
    Apr 2005
    Location
    Auckland, New Zealand
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks for that...

    ive gone through it all giving it a look over, and its now pretty simple
    -container
    --logo
    --leftmenu
    --fcontent
    --bottommenu(footer)

    and theres very few (5 over the whole site) div's that have position set on them now...

    im not sure what else there is that could be breaking it as its a pretty basic layout now...

    getting rid of position on the fcontent div makes the height work properly, but of course with no position it sits at the far left which doesn't work

  11. #11
    SitePoint Zealot
    Join Date
    Apr 2005
    Location
    Auckland, New Zealand
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm is certainly a lot closer since cleaning it all up, but still not quite getting all the way down like id expect

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    On fcontent, rather than using left and top, use margin-left and margin-top.

    E.g.

    Code:
    .fcontent {
      margin-left: 160px;
      margin-top: 210px;
    }
    Using position: relative and then top and left moves the element but other elements don't recognize the new position.

  13. #13
    SitePoint Zealot
    Join Date
    Apr 2005
    Location
    Auckland, New Zealand
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    On fcontent, rather than using left and top, use margin-left and margin-top.

    E.g.

    Code:
    .fcontent {
      margin-left: 160px;
      margin-top: 210px;
    }
    Using position: relative and then top and left moves the element but other elements don't recognize the new position.
    aah thank you for that - I knew it had to be something really simple...
    ill keep that in mind for the future for other ones...

    much much appreciated


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
  •