FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Trouble with css positioning

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 


Satori
So I'm working on my website and I can't get the main container box to stretch from the VERY top of the page to the VERY bottom of the page. I want it to at least stretch that far, or farther if need be. I can't seem to figure it out. Can someone help me?

Thanks!
benjad
short answer, you can't. There is no way to set an element to %100 height. But there are some tricks out there...
Satori
benjad wrote:
short answer, you can't. There is no way to set an element to %100 height. But there are some tricks out there...


Ok, so for example...

http://www.csszengarden.com/?cssfile=/135/135.css

This page here has the box that contains all the text stretching from the very top of the page, all the way to the bottom. When you look at the very top, you don't see the background along the top edge of the box. When you scroll down and look at the bottom of the page, you don't see the background running along the bottom either.

That is all I mean. I have looked at the css for the page I referenced, and I can't tell what I'm doing differently. It is pretty frustrating because it seems like it should be so simple.

Anyone have any thoughts?
benjad
try setting the body margins and padding to 0.

I believe I understand your problem now. You say that on your site, the main div is a bit below then top of the page (and the background shows through), and on the bottom, there is a bit of a margin as welll between the bottom of the page and the bottom of the div.

Try the margins, set them to 0.

Code:
body {
   ....
        margin: 0px;
   }
Satori
benjad wrote:
try setting the body margins and padding to 0.

I believe I understand your problem now. You say that on your site, the main div is a bit below then top of the page (and the background shows through), and on the bottom, there is a bit of a margin as welll between the bottom of the page and the bottom of the div.

Try the margins, set them to 0.

Code:
body {
   ....
        margin: 0px;
   }


Benjad,
You are exactly right about what kind of problem I'm having. I did already set the margins to 0, which is why it was baffling me all day. Here is the code I have related to this issue:

Code:
body {
  margin: 0px;
  padding: 0px;
  text-align: center;
  font-family: verdana, arial, sans-serif;
  font-size: .85em;
  color: #666;
  background: url(still haven't picked a permanent background);
}

#siteBox {
  width: 880px;
  margin: 0 auto;
  padding: 25px;
  text-align: left;
  background-color: #EEE;
  position: relative;
  top: -20px;
}


And the html is as follows:

Code:
<body>

<div id="siteBox">

  <div id="header">
    etc...
  </div>
</div>


I managed to fix one problem. The gap that went across the top between the siteBox and the top of the page is now gone. The "top: -20px;" is what fixes it...though I'm not exactly sure why. And it still has a gap at the bottom. And "bottom: -20px;" doesn't do anything for some reason.

Also, in a different problem, the background within the "siteBox" div doesn't stretch down to surround the text elements within the div. This baffles me. It should stretch to encompass all the text I put inside it, but when I test it in the browser, it doesn't do that. It stops just underneath the header image and the nav menu. I have to set it to a fixed height in order to make it large enough to put what I want in it, though this leaves extra white space at the bottom if I don't fill it with text (because it doesn't stretch to fit the text!)

Help someone please!
ck88
Is one of the inner div elements causing the problem. I saw that you at least have "siteHeader" in there.
polarBear
Tried this already?
Code:

html,body{
 width:770px;
 height:100%;
 background-color:#F4F4F4;
 color:#333;
 margin:0 auto;
 padding:0;
 text-align:center;
 font-family: Verdana, Arial, sans-serif;
 font-size:12pt;
}
#siteBox{
 margin:0 auto;
 padding:0;
 text-align:left;
 width:770px;
 height:100%;
}

Code:

<html>
 <body>
  <div id="siteBox">
  </div>
 </body>
</html>

That above should do the trick. It's trivial once you get to know the box model
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.