Forum Moderators: not2easy
What I am trying to do is have the header have content that is a certain height and the rest of the content to fill the height of the rest of the window or if the content is longer, then obviously it would have a scroll.
<div class=headwrapper><img src="images/comp_head.jpg" width="737" height="182"></div>
<div class=mainwrapper></div>
If I define the mainwrapper to 100%, then it will be too large, but if I specify a certain height, then it might not fill. Help? Thanks.
One method to do this, probably the easiest I can think of is the following:
body,html{height:100%}
#wrapper{height:100%;padding-top: qwertyuiop}
#header{height: qwertyuiop;position:absolute;top:0;left;0}
<wrapper>
<header />
weeee
</wrapper>
qwertyuiop would be 182px I guess.
A potential problem: this won't work if you want your wrapper to have like padding/margin/border as well.
Thing is, I don't really see the reason why you want this done, unless it's For the margin/padding/border... why? because otherwise you could just get the same effect with a background image.
[edited by: Xapti at 5:06 am (utc) on June 7, 2007]
<html>
<head>
<style>
html, body {
background-color: #faf8e5;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #666666;
margin: 0px;
padding: 0px;
height: 100%;
}
#headwrapper {
height: 182px;
position:absolute;
top:0;
left:0;
}
#mainwrapper {
background-color: #FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
margin-left: 30px;
width: 737px;
padding-top: 182px;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
height:100%;
}
#content-middle {
padding-left:5px;
padding-right:-5px;
width: 400px;
position: absolute;
left: 150px;
}
#content-left {
padding-left:5px;
padding-right:-5px;
width: 150px;
position: absolute;
left: 0;
}
#content-right {
padding-left:5px;
padding-right:-5px;
width: 180px;
position: absolute;
right: 0;
}
#content-main {
padding-left:5px;
padding-right:-5px;
width: 550px;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<div id=mainwrapper>
<div id=headwrapper><img src="images/comp_head.jpg" width="737" height="182"></div>
<div id="content-main">
<p>Content <a href="asdf">Link</a></p>
<p>asdf</p>
<p>asdf</p>
<p>asd</p>
<p>fas</p>
<p>dfas</p>
<p>df</p>
<p>asdf</p>
<p>asd</p>
<p>fasd</p>
<p>fasdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asd</p>
<p>fasdf</p>
<p>asdf</p>
</div>
<div id="content-right"> Content <a href="asdf">Link</a></div>
</div>
</body>
</html>
#wrapper{position:absolute;top:0;bottom:0;left:0;right:0; padding-top:182px}
the reason that works is because padding IS included in an objects positioning. IE doesn't support simultanious use of top and bottom though (or left and right). left and right also had to be used to make it span 100% width. This could also be done with width:100%, but then you couldn't use any padding properly (which really isn't an issue if you just give your contained elements a margin).
If you dont' mind using JS, the bug in IE can be fixed easily using JavaScript.
And in your second set of code there, you're using position:absolute without both a <top or bottom> and a <left or right>. You need to specify both coordinates for it to work properly, that may have contributed to your problem.
For your inner columns, you don't even likely want to be using absolute positioning. Floating the divs to the left and to the right should work fine.
[edited by: Xapti at 11:58 pm (utc) on June 7, 2007]
<html>
<head>
<style>
html, body {
background-color: #faf8e5;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #666666;
margin: 0px;
padding: 0px;
height: 100%;
}
#content-header {
height: 182px;
position: static;
}
#mainwrapper {
background-color: #FFFFFF;
border-color: #000000;
border-width: 1px;
border-right-style: solid;
border-left-style: solid;
margin-left: 30px;
width: 737px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height:100%;
}
#content-middle {
padding-left:5px;
padding-right:-5px;
width: 400px;
position:relative;
float:left;
}
#content-left {
padding-left:5px;
padding-right:-5px;
width: 150px;
position:relative;
float:left;
}
#content-right {
padding-top:5px;
width: 184px;
position:relative;
float:right;
}
#content-main {
padding-top:20px;
padding-left:10px;
width: 540px;
position:relative;
float:left;
}
#content-main h1 {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
line-height: 0px;
color: #336699;
}
#content-all {
clear:both;
padding: 5px 0 5px 0;
text-align:center;
width: 100%;
}
</style>
</head>
<body>
<div id=mainwrapper>
<div id=headwrapper><img src="images/comp_head.jpg" width="737" height="182"></div>
<div id="content-main">
<p>Content <a href="asdf">Link</a></p>
<p>asdf</p>
<p>asdf</p>
<p>asd</p>
<p>fas</p>
<p>dfas</p>
<p>df</p>
<p>asdf</p>
<p>asd</p>
<p>fasd</p>
<p>fasdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asd</p>
<p>fasdf</p>
<p>asdf</p>
</div>
<div id="content-right"> Content <a href="asdf">Link</a></div>
</div>
</body>
</html>
Well putting position:fixed on it will fix the problem, but it could introduce other problems. For instance, you then might need to also add overflow:auto to it as well. The most noticeable change would be that your background image (if it's not an image then you're fine) will not scroll with your content, creating a bizarre (some people like it) effect (same effect if you set property background-attachment to fixed).
Position:fixed is not really supported by IE(6), so that's another problem. Again it is fixable with javascript though (I think, even in this case, it can be fixed with CSS hacks instead, too)
[edited by: Xapti at 1:30 am (utc) on June 9, 2007]
Couldn't tell if position:fixed helped, because I lost my scroll bar and when it didn't add back when I put in overflow:auto; All of my content disappeared. Not sure why exactly. I added all of these to the html, body.
Any other ideas?
I got it working well in IE7 and Firefox but there seems to be no way with IE6 - with the possible exception of Javascript. Absolute elements aren't supported very well.
I'm currently considering tables :(
