#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12

    more css sizing problems please help


    Hi,

    I am using the code below to try and create a resizable page.

    the problem is when the i cant get left nav to stretch the full height of the content div..... so when it is resized the footer etc all go over the top of the image...which looks wrong as iwant it all to stay in proportion

    any help would be much apreciated

    css

    body { /*sets properties for the body of the document*/
    background-color:#ffffff;
    margin:0px 0px 0px 0px;
    }
    #container {

    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    padding: 0px;
    background-color: orange;
    width: 80%;
    min-width: 241px;
    }
    #footer {
    padding: 0px;
    position: relative;
    padding: 0px;
    background-color: yellow;
    width: 100%;
    }

    #content {
    margin-left:182px;
    width:100% - #leftnav;
    background-color: red;
    align: right;
    min-width: 50px;

    }

    #leftnav { /*sets properties for the left nav bar*/

    float:left;
    background-color : #66ccff;
    width: 180px;
    border-right:2px solid;
    border-color:#663300;
    height:100%;


    }

    html

    <div id="container"> container
    <div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"></div>

    <div id="content">content content content content content content content content
    content content content content content content content content content content</div>
    <div id="footer">footer</div>
    </div>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    Try looking here http://www.alistapart.com/articles/footers/ for a great article on footers.

    -D
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12
    Ive tried that but as soon as i put the left nav it it all goes haywire.

    any suggestions on how i can change the code would be apreciated.

    cheers
    Andy
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    There are a couple of things,
    Code:
    #content {
    margin-left:182px;
    width:100% - #leftnav;  /* This doesn't work, you can't calculate.  Nice try, though.
                             IE effs up the width attribute where floats are involved.
                             Just remove this line.  The default is 100% anyway */
    background-color: red;
    align: right;
    min-width: 50px;  /* Lose this line, too.  IE doesn't know min/max anything. */
    }
    Add this rule to your #footer;
    Code:
        clear: both;
    That will ensure that the footer is below the float. Look at my little float demo to see what's happening.

    cheers,

    gary
    Last edited by kk5st; April 7th, 2004 at 02:25 PM. Reason: dumb keyboard! #%*$#@%
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12
    Fantastic, that seems to work

    thanks for your help

    cheers
    andy
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12
    I just checked it in IE and it looks awful, but works perfectly in mozilla....any ideas?

    cheers
    andy
  12. #7
  13. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Can you define "awful"? Post a URL or show us a screen-cap

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12

    screen caps


    Hi

    here are the screen caps so you can see what i mean
    Attached Images
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    The code posted at the top works fine for me in IE 6 when you take kk5st suggestions on board.

    Although I am testing it in XHTML strict & if you throw IE 6 into quirks mode it acts up a little, but not as bad as your screen shot.

    Do you have the updated HTML & CSS for us to look at?

    -D

IMN logo majestic logo threadwatch logo seochat tools logo