8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

div layout

by tuldok
7 replies
  • WEB DESIGN
    • |
hi warriors,

ive got a little problem on my layout.. i plan to put the footer on absolute bottom regardless of the window size of the explorer in which i did place it correctly, but my problem is it overflows the content area if you resize it to a smaller resolution..

next is can i set the maximum resolution of the window to fit the entire website incase of resizing it to a larger resolution..


thanks in advance warriors..


jay
#absolute bottom #div #layout
  • Profile picture of the author hotscode
    if you want to make your webpage suitable with all resolution . you cannot use example like this
    <table width = "100px"

    you must use like this

    <table width = "100%"

    so its will auto resize with the resolution
    {{ DiscussionBoard.errors[948427].message }}
  • Profile picture of the author tuldok
    but i use div.. and i already use the percentage size.. how about the vertical fit?
    {{ DiscussionBoard.errors[948471].message }}
    • Profile picture of the author B.W
      Working with percentage based layouts is not always practical. If you use a percentage based layouts, then you should at least apply a min-width and a max-width.

      What you want to do, is not natively supported in the browsers. So you would either want to revert to older standards (table based), or fake it by positioning the backgrounds. One way of doing this, can be seen in the Equal Height Columns + header and footer example at Brugbart.

      If what you want is a sticky footer, then position it absolutely towards the bottom, with a div placed (static or relative) right after the content, of same height as that of the footer. This would make sure that the content doesn't get hidden beneath the footer, and still allow the footer to roll along with the content, as it gets longer. Be sure to apply position relative, to the containing element of the footer, otherwise it just sticks to the root element, rather then the containing element.

      The final method floats a div to either of the sides, of about 1px width, with a min-height of 100%. This should then in turn push the footer at place, when the content isn't long enough.


      Its however messy no matter how you put it, and a stunt like that, is better pulled with a table based layout, at least when you got multiple columns.
      {{ DiscussionBoard.errors[948727].message }}
  • Profile picture of the author tuldok
    thank you for your responses..
    {{ DiscussionBoard.errors[949740].message }}
  • Profile picture of the author David0022
    Creating a sticky footer with CSS is tricky and can cause unexpected results in different browsers. If you really want a sticky footer, follow B.W.'s advice and use a table.

    I sometimes use a table as my "pagewrap" and then within the table layout my website with CSS. It's not the most "pure CSS" solution, but it will work.

    I hope this helps,
    -David
    {{ DiscussionBoard.errors[952327].message }}
  • Profile picture of the author cdwise
    Personally I prefer the footer at the bottom of the page content not the bottom of the browser, especially on short pages. I frequently use a tablet pc in portrait orientation which means if I were to have my browser full height would be 1400px. A big cap between the bottom of the content and the footer would look really silly.

    Remember that the web is not print and you should go with web conventions which means the footer at the end of the content not the bottom of the browser.
    {{ DiscussionBoard.errors[957689].message }}
  • Profile picture of the author HomeBizNizz
    Tried "Reset CSS" first...?
    Just google: Reset CSS
    It will overwrite the default CSS settings in the browsers
    and even the playing field out a bit between browsers.

    And with each reinstall with WinXP comes the dreaded IE6...
    {{ DiscussionBoard.errors[958830].message }}

Trending Topics