SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member i_slim's Avatar
    Join Date
    Oct 2003
    Location
    edinburgh
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    is there a css equivalent to width=* ?

    is there a css equivalent to width=* ?
    I think the subject says it all :-)

    I want to create a <div> that expands to fill the rest of the screen when positioned at a specific screen location eg left:124px; height: 89px

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    A div takes up as much width as possible by default. Just give it extra margin for the "positioning" effect you want:
    Code:
    div {
      margin-left: 124px;
      margin-right: 0;
      height: 89px;
      border: 1px solid black;
    }
    You should see the div you apply the above style to start about 124px from the left of its container and go all the way to the right.

  3. #3
    SitePoint Member i_slim's Avatar
    Join Date
    Oct 2003
    Location
    edinburgh
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks, but

    Thanks for that, but the information I supplied was off, instead of height: 89px

    I meant top: 89px and that the height needs to be 100% too (well, to the bottom of the window, without scrolling off.

    Here is the code:
    <span class="containter">
    <div class="header" id="headerID"></div>
    <div class="nav" id="navID"> nav </div>
    <div class="main" id="mainID"> main </div>
    </span>


    and the styles:

    .header { position: absolute; width:100%; top:0px; left: 0px;
    height: 89px; background-repeat: no-repeat; background-image: url(../../images/cc1/topFrame.png);
    background-color: #FF0000}

    .nav { position: absolute; margin-top:89px; width:124px; height: 100%; background-color: #00FF00}

    .main { margin-right: 0; margin-left: 124px; margin-top: 89px; background-color: #0000FF; height: 100%}

    .container: {position: static; width: 100%; top: 0px; left 0px; height: 100%}


    It almost works with i.e. - except for scrolling off the bottom, but does not work with nn7 or moz

    Thanks for your help - I have a new angle of attack now

  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)
    Quote Originally Posted by i_slim
    Thanks for that, but the information I supplied was off, instead of height: 89px

    I meant top: 89px and that the height needs to be 100% too (well, to the bottom of the window, without scrolling off.
    You can set the top margin to 89px as well, but getting a 100% height is impossible to do reliably.
    Quote Originally Posted by i_slim
    Here is the code:
    <span class="containter">
    <div class="header" id="headerID"></div>
    <div class="nav" id="navID"> nav </div>
    <div class="main" id="mainID"> main </div>
    </span>


    and the styles:

    .header { position: absolute; width:100%; top:0px; left: 0px;
    height: 89px; background-repeat: no-repeat; background-image: url(../../images/cc1/topFrame.png);
    background-color: #FF0000}

    .nav { position: absolute; margin-top:89px; width:124px; height: 100%; background-color: #00FF00}

    .main { margin-right: 0; margin-left: 124px; margin-top: 89px; background-color: #0000FF; height: 100%}

    .container: {position: static; width: 100%; top: 0px; left 0px; height: 100%}
    You cannot have a span as a container for <div>s. It won't validate, since a span is an INLINE element and a div is a BLOCK-level element. Change the outer span (.container) to a <div>.

  5. #5
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Better even: completely loose the span.container. There is no need for that. You can set the needed styles on the body.

    I would do it like this:
    HTML Code:
    <html>
    <head>
    <style type="text/css">
    body { top:0; left:0; padding:0; margin:0; background:#00f; }
    
    #header { position:absolute; width:100%; top:0; left:0; margin:0; height:89px;
              background: #f00 url(../../images/cc1/topFrame.png) no-repeat; z-index:3; }
    
    #nav { position:absolute; top:0; left:0; width:124px; padding-top:89px; 
           margin:0; height:100%; background:#0f0; z-index:2; }
    
    #main { margin: 89px 0 0 124px; }
    
    </style>
    </head>
    <body>
    
    <div id="header"> header </div>
    <div id="nav"> nav </div>
    <div id="main"> main </div>
    
    </body>
    </html>
    Last edited by yngwin; Oct 20, 2003 at 07:41.

  6. #6
    SitePoint Member i_slim's Avatar
    Join Date
    Oct 2003
    Location
    edinburgh
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for trying guys, but I pretty much think I'm going to have to use tables. This needs to work exactly and in NN7 and Mozilla (and for the mac).

    yngwin - yours was the closest, but the height: 100% scrolls off the edge in NN

    Thanks guys.

  7. #7
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS fails abysmally yet again
    From the English nation to a US location.

  8. #8
    SitePoint Member i_slim's Avatar
    Join Date
    Oct 2003
    Location
    edinburgh
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IT does seem pretty crap that you can't get a div to take up the rest of the page, at the start of this, I was pretty confident that I was just being stupid. It seems such an obvious thing to require.

    As for removing support for the "height" of tables - nice

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by i_slim
    IT does seem pretty crap that you can't get a div to take up the rest of the page, at the start of this, I was pretty confident that I was just being stupid. It seems such an obvious thing to require.
    Why is it crap? Think of it this way: If you define a 100% height (and remember that you're defining height, not min-height), then what happens if your content is bigger than the browser window? It's either hidden, or your content will go beyond the bounds of its containing element. I'm betting that your layout wouldn't suffer if you just let the content dictate its own height and you just let it flow.

  10. #10
    SitePoint Member i_slim's Avatar
    Join Date
    Oct 2003
    Location
    edinburgh
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A layer can deal with the overflow using it's own scroll bar, thus leaving the navigation and header on display.

    The reason for wanting it to take up the rest of the page is that I have 2 seperate elements - each with a different background colour. the layout requires them to take up the whole screen, rather than stop in the middle of the page and revert to one colour

    http://www.net-pixie.com/veb

    will give more of an idea of what I was trying to achieve.


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
  •