SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getting them streched all the way

    I'm trying to create a new layout using just CSS. Here you can see my attempt. If you check the site you'll see that my border div and my content div are not streched all the way down. And of course that is what i need.

    So how to solve this???

    I know it can be easily solved with an absolutely positioned border div. But that's not what i want. And i don't think i can use an absolutely positioned content div.

    This is the CSS i used...

    Thanks
    ][ Med

  2. #2
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the body height:100% and then set the relevant div's height:100%
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  3. #3
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick response, but that option won't work. I'm not sure why but it won't respond to % values but it does to pixel values.

    Setting the intended div's to relative positioning doesn't seem to work either...

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Why do you need 100% height, especially if your content won't be going down that far?

  5. #5
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well most important is the border div. This will contain a background image which is essential in the design.

    For the content div it actually doesn't matter...

  6. #6
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is some code that should do the job. Basically with stict HTML and I assume XHTML to use the % height you need to set the height of the containing object. So you have to start with the body and then set every div that contains the one that you want to be full size.

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <title>Test</title>
    <link href="default.css" media="all" rel="stylesheet" type="text/css" />
    <style>
    body {
    	margin: 0px;
    	background-repeat: repeat-x;
    	background-color: #CCC;
    }
    #contenta {
    	width: 760px;
    	background-repeat: repeat-x;
    	background-color: #FFC;
        height: 100%;
    }
    #header {
    	height: 102px;
    	background-position: 36px 50px;
    	background-repeat: no-repeat;
    	background-color: #0FC;
    }
    #border {
    	background-repeat: no-repeat;
    	width: 130px;
    	float: left;
    	background-color: #966;
        height: 100%;
    }
    #contentc {
    	background-color: #06F;
    	float: right;
    	width: 630px;
        height: 100%;
    }
    #subheader {
    	height: 209px;
    	background-color: #0FF;
    }
    #menu {
    	height: 35px;
    	background-color: #F36;
    	width: 630px;
    }
    #content {
    	background-color: #CC9;
    	width: 630px;
        height: 100%;
    }
    #mmenu {
    	background-color: #C9F;
    	height: 209px;
    	width: 215px;
    	float: left;
    }
    #menuitem {
    	background-color: #F6C;
    	width: 215px;
    	height: 174px;
    }
    #himage {
    	float: right;
    	height: 209px;
    	width: 415px;
    	background-color: #090;
    }
    #titel {
    	width: 215px;
    	background-color: #FC0;
    	height: 35px;
    }
    </style>
    </head>
    
    <body onload="getLinksToBlur();" style="height:600px;">
    <div id="contenta">
      <div id="header">header</div>
      <div style="height:100%;">
        <div id="border">border</div>
        <div id="contentc">
          <div id="subheader">
            <div id="mmenu">
              <div id="titel">titel</div>
              <div id="menuitem">menu item</div>
            </div>
            <div id="himage">himage</div>
          </div>
          <div id="menu">menu</div>
          <div id="content">content</div>
        </div>
      </div>
    </div>
    </body>
    </html>
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  7. #7
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but that won't work for me either. It's not possible to set a height for my document, because this will change throughout the site.

    Absolute positioning seems to be the best way after all. At least the easiest...

  8. #8
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Med
    Thanks but that won't work for me either. It's not possible to set a height for my document, because this will change throughout the site.
    Well you could create different body classes for the different page layouts.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  9. #9
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ... i like that idea...

  10. #10
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So there is no way of having a "self extending" div just like a table???
    Content Writing Service - Get custom SEO articles for 10$

  11. #11
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by dragonfly_7456
    So there is no way of having a "self extending" div just like a table???
    Why not?
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  12. #12
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking yeah, why not..?

    .. its all relative; child-parent, good-bad, hot-cold, tables-divs: http://www.ict-id.nl/temp/sitepoint/...rcentages.html
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..



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
  •