www.webdeveloper.com
Results 1 to 7 of 7

Thread: Footer Placement Problem

  1. #1
    Join Date
    Nov 2002
    Posts
    15

    Footer Placement Problem

    I am using this code listing:

    div#menuBar {


    position: absolute;
    left: 10px;
    top: 140px;
    padding-left: 0px;
    float: left;
    margin: 0px 0px 60px 0px;
    width: 170px;
    text-align: left;

    color: #000000;
    background-color: #ffffff;


    }



    div#main {

    width: auto;
    background-color: #cccccc;
    color: #000000;
    margin-top: 10px;
    margin-left: 200px;
    margin-right: 4%;


    }

    div#footer {
    margin: 10px 0px 0px 0px;
    color: #000000;
    font-size: 8pt;
    font-family: arial,helvetica,sans-serif;
    font-weight: normal;
    background-color: transparent;
    padding-bottom: 5px;
    text-align: center;
    width: 100%;
    height: 30px;

    }


    Inside my HTML first comes menuBar div, later main and last footer...So footer is placed according to main (fixed-relative to it since it is default unless otherwise mentioned)..

    Here comes the problem (i guess common and simple but i haven't yet figured what is to blame): when the content of main div is short, footer "jumps" over the menuBar messing the design...

    how can i instruct the layer footer to position itself according to menuBar's height + a value..If possible, i want to maintain the absolute positioning of the menubar unless it is impossible to do so...

    Perhaps something to this effect:

    document.getElementId("footer").offsetTop = <code here>

    A bit of help will be greatly appreciated by a newbie like me...


    a... where can i find a DOM reference that could point the methods, attributes etc .....??

    Thank u in advance!

  2. #2
    Join Date
    Nov 2002
    Posts
    984

    Re: Footer Placement Problem

    Originally posted by cssrules

    If possible, i want to maintain the absolute positioning of the menubar unless it is impossible to do so...
    It's impossible with CSS. You could do it with JavaScript but that only works if JS in turned on in the browser.

    I would use CSS floats instead

    <div style="float:left;width:170px;">menu</div>
    <div style="margin-left:200px;">main</div>

    <div style="clear:both;">footer</div>
    // Stefan Huszics

  3. #3
    Join Date
    Nov 2002
    Posts
    15
    thanx for the tip...

    now the footer is placed underneath the longest div (both menuBar and main are fixed-relative)...


    There is another problem though...I need to keep the menubar explicitely sized (i.e. 170px) and place the main div next to it by just declaring margin (no widths)..Kinda like this code:


    div#menuBar {

    position: relative;
    float: left;
    margin: 10px 0px 0px 10px;
    width: 170px;
    text-align: left;
    color: #000000;
    background-color: #ffffff;


    }


    div#main {
    width: auto;
    margin-right: 5%;
    margin-left: 200px;
    text-align: left;
    }

    Everything's ok under Mozilla.. IE 6 though seems to create a nasty gap next to the div i have as a title...

    Here is the url: http://www16.brinkster.com/comsite9/test/altIndex.htm

    What can be done...I need to keep the menuBar explicit (170px) and the main to strecth ( liquid) without declaring width....

    This trick works fine if i declare position: absolute for the menubar but, as i have mentioned in the previous thread, i need relative-fixed for the menuBar to keep the footer ok....




    How can i have both (menubar 170px and main without explicit width) without sacrificing one or the other???

    heeeeeeeelp........

  4. #4
    Join Date
    Feb 2003
    Posts
    8

    Lightbulb white IE border to the left

    Hi,

    Try this for deleting IE's nasty whitespace:

    Code:
     div.topicHeader {
    	background: #009999;
    	color: #ffffff;
    	font-size: 11pt;
    	font-family: arial,helvetica,sans-serif;
    	font-weight: bold;
    	height: auto;
    	line-height : 50px;
    	margin: 0px 0px 0px 0px;
    	padding-right: 3px;
    	text-align: right;
    }
    In the land of plenty, miss pixelperfect is a *****

  5. #5
    Join Date
    Nov 2002
    Posts
    15


    Words can explain how helpful your tip has been...

    I was trying endless hours to find a solution, i even tried to place main to float at the left....Yet nothing...Up till now...


    T H A N X!!

    Forums = MAGIC!

  6. #6
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by cssrules
    Everything's ok under Mozilla.. IE 6 though seems to create a nasty gap next to the div i have as a title...
    Yepp, there is a know bug in IE that makes it for some reason add a 3px margin on things next to a float.
    One of the many issues that makes IE blow as a browser.

    This page is a good description of the issue.
    http://users.rraz.net/mc_on_the_rock...reepxtest.html
    // Stefan Huszics

  7. #7
    Join Date
    Nov 2002
    Posts
    15
    well i have decided to use an image inside the topicHeader div and align it to the left...

    Same bug again...i' ve tried applying the line-height and height: auto attributes....In vain....Not working...

    same annoying whitespace...

    How can it be corrected......?

    Thank u in advance!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles