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
| SitePoint Sponsor |
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
A div takes up as much width as possible by default. Just give it extra margin for the "positioning" effect you want:
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.Code:div { margin-left: 124px; margin-right: 0; height: 89px; border: 1px solid black; }
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
You can set the top margin to 89px as well, but getting a 100% height is impossible to do reliably.Originally Posted by i_slim
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>.
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 08:41.
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.
CSS fails abysmally yet again
From the English nation to a US location.
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
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.
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.
Posting Permissions
Bookmarks