FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Trouble with css positioning





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
Related topics
check out my new layout.
new to css: help with positioning
Divs and Tables
Flash is for...?
My first slice.
What is a site without tables?
Is CSS a replacement of tables or assisting method of them ?
About Flash Component?
Login Screen
CSS Positioning in Internet Explorer
tables or div ?
css questions: pls. answer
Why don't people like tables?
Image Layers ...... I'm Stuck
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

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