Making a block span the entire length of a page vertically. [Archive]

View Full Version : Making a block span the entire length of a page vertically.

pmontesi

10-04-2005, 06:15 PM

Hi,

I'm just starting out with CSS instead of tables. I'm not sure how to correctly make a block of code (in my case, the "container") span the entire length of a page vertically.

Currently, the code is working, but I don't know how I did it. I just copied off some site. But I want to change the width of container to make it wider. When I do it, the white space does not reach the bottom how I would like.

So, I would like to make it so it will reach the bottom of the page no matter what the height is. Hope I'm making sense.

Here's the webpage: www.ncsmtg.com/trial.htm

Here's my CSS:

/* basic elements */
body {
margin: 0px;
padding: 0px;
text-align: center;
color: #000000;
background-image: url('images/brick.gif');
background-attachment: fixed;
}

p {
color: black;
}

/* specific divs */

#container {
margin: 0 auto;
width: 900px;
text-align: left;
position: relative;
padding: 0 10px 0 10px;
background-color: #FFFFFF;
}
* html #container
{
width: 1000px;
w\idth: 724px;
}

#top {
min-width: 470px;
}

#text {
color: black;
}

#menu {
background-color: #FFFF00;
margin: 0px;
width: 500px;
height: 50px;
float: left;
}

#logo {
margin: 0px;
background-color: #999999;
width: 380px;
height: 200px;
float: right;
}

#pic {
margin: 0px;
background-color: #FF0066;
width: 500px;
height: 200px;
float: left;
}

#address {
margin: 0px;
background-color: #990033;
width: 380px;
height: 50px;
float: right;
}

#news {
margin: 0px;
background-color: #0099CC;
width: 300px;
height: 300px;
float: left;
}

ronaldb66

10-05-2005, 09:27 AM

Hope I'm making sense. Erm, not really.

What do you mean by "making a container span the entire length of a page"?
Which container are you referring to specifically?
Couldn't you show an example (using tables for layout, if you want) of what you want to achieve? I have to stress that "copying it off some site" is not a very successful way to learn CSS; if you want to get into in for real, start simple and work your way through some tutorials like the (http://htmldog.com/guides/cssbeginner/) ones (http://htmldog.com/guides/cssintermediate/) found (http://htmldog.com/guides/cssadvanced/) on HTML Dog (http://htmldog.com/).

Tynan

10-05-2005, 10:26 AM

what ronald said, do it from scratch, it's suprising ly easy when you get started, I know!

is it as simpple as

height:600px; or whatever

added to the container css code?

rpgfan3233

10-05-2005, 05:03 PM

I'm guessing this is a 100% height question.

The idea is to make the page span the entire length of the viewport.
Here's the CSS for it:
html, body {
margin: 0; /* to prevent scrollbars */
padding: 0; /* from appearing */
height: 100%;
}

#pageContainer {
color: #7f0; /* just to show that */
background-color: #07f; /* it works */
height: 100%:
}

HTML:


<html> 
<head>

</head>
<body>
<div id="pageContainer">
Decent colors, IMHO 
</div>
</body>
</html>

mrruben5

10-05-2005, 11:12 PM

Use Ala's fauxcolumns (http://www.alistapart.com/articles/fauxcolumns/).

pmontesi

10-06-2005, 04:17 AM

Thank you guys! I figured out what was going on.

I probably will be back with more questions as I head into this project!

Beware.... :eek:

babycam

10-07-2005, 03:51 AM

_Aerospace_Eng_

10-07-2005, 03:56 AM

Hi peoples,
Im having a similar issue with making a div where i want to set the margins so it sits in a specific position on the page.

The left, right and top margins give me the desired effect, BUT the bottom property is being ignored. Now I know that there’s no content in there so it’s just a block level element - however im putting img's of paintings in there and I want them to be centred vertically and horizontally in the box.

Im not keen on setting a height it will no longer be liquid.

any ideas???

#right {
margin: 70px 20px 100px 180px;
/*height:auto;*/
border:1px solid #000;
}
Have you not been reading the posts in this thread? How do you expect us to know what is going from just seeing a few lines of CSS. I'm sure there is a lot more CSS and without knowing what the html looks like, yes the html matters it is what makes up the page its hard for us to even tell you where to begin.

babycam

10-07-2005, 04:48 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : 3 columns, the holy grail</title>

<style type="text/css">
body {
margin:0;
padding:0;
}

#left {
position: absolute;
left: 30px;
top:70px;
width:120px;
border:1px solid blue;
}

#right {
margin: 70px 20px 100px 180px;
border:1px solid #000;
}

#banner {
position: absolute;
left: 180px;
top:20px;
height: 30px;
border:1px solid red;
background: yellow;
}

#footer {
position: absolute;
left: 180px;
right: 20px;
bottom: 0px;
height: 100px;
border:1px solid teal;
}

#logo{
position: absolute;
margin-left: 20px;
bottom: 0;
height: 100px;
background-color: yellow; }
</style>

</head>
<body>
<div id="banner">welcome to the gallery of Hazel Kleviansky</div>

<div id="left"><h1>left</h1></div>

<div id="right"><h1>right</h1></div>

<div id="footer">footer</div>

<div id="footer">
<img src="C:/_wamp/www/hazelart_mk2/images/logo1.gif" width="175" height="43" border="0" alt="" />
</div>

</body>
</html>

_Aerospace_Eng_

10-07-2005, 04:57 AM

Okay I don't see the need for absolute positioning. Check out this example. It uses a background image to fake the column look. http://bonrouge.com/2c-hf-fluid.php