...

View Full Version : Border height = 100%



pandabunny
05-20-2008, 08:28 AM
Hi. For some reason I am having a reoccuring problem when it comes to height=100%.

I am trying to get a border (not image) to extend the height of the page, or at least be able to control it better than I am now.

Right now, it will only extend to where the content in the related div stops.

For example, here is my code:

#content-right-border
{
border-left: 1px #c1c1c1 solid;
height: 100%;
}

This div is within a "right column" div, where there are 2 columns within the right column (if that makes sense...like 2 right navs). Right now the far right column extends far, and the left-right column is where I have less content, but want the border to extend all the way to where the right-right column ends.

How would I control that height? Would I have to make that border into an image and repeat-y it, or is there a way to extend that border without making it into an image?

brazenskies
05-20-2008, 12:38 PM
try...

#content-right-border
{
border-left: 1px #c1c1c1 solid;
overflow:visible;
}

If I misread the question, apologies, my eyes aren't working well today :P

abduraooft
05-20-2008, 12:55 PM
You need the full code of your document, including html & CSS. Or a link to your page would be more useful.

effpeetee
05-20-2008, 01:38 PM
Try putting the border on to the body or wrapper div
css

body {
border-left: 1px #c1c1c1 solid;
}

but a link to your site would enable us to help you more.

Frank

bazz
05-20-2008, 02:36 PM
AFAIK, you can't tell a border to be 100%. But you could tell it to be 1px as you have done. If you want to have the area, in which a picture is positioned, to stretch to the top of the screen, then you might want to put it into a div (which can do the 'stretching' and then padding it to push the pictiure downwards or wherever.

#picture_div {
background-color: #ccc;
padding : 100px 0 0 0;
margin : 0;
border : 1px solid #000040;
}

But we still need to see youre code to be sure that this is what you want.



bazz

bazz
05-20-2008, 02:39 PM
How would I control that height? Would I have to make that border into an image and repeat-y it, or is there a way to extend that border without making it into an image?


You might need to ask in the javascript forum. There is a JS code to make a div extend below where its content takes it. Remember divs extend in height as determined by their content.



@Frank,

presumably somewhere along the line, we'll find a link to a JS code that does this. Can we add it to your list in a section, perhaps, entitled 'js for positioning'??

bazz

rangana
05-20-2008, 03:59 PM
I've got them in my favorites :)

http://bonrouge.com/~fixH
http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

bazz
05-20-2008, 04:04 PM
Great rangana.

That's just what I meant.

bazz

pandabunny
05-20-2008, 05:01 PM
I tried that but it didn't work. Here is the url:
http://dev.peta.org/living2/

My css is here:
http://dev.peta.org/living2/style/style.css

I am almost thinking of resorting to (I know I am going to get crap for it here!) putting the rightnav in one big table. I have sucessfully made a handfull of "table-less" pages, but the deadline on this one is so tight that I am considering the horrible alternate!


try...

#content-right-border
{
border-left: 1px #c1c1c1 solid;
overflow:visible;
}

If I misread the question, apologies, my eyes aren't working well today :P

pandabunny
05-20-2008, 05:03 PM
Remember divs extend in height as determined by their content.


Thanks for that confirmation! Sometimes I just need to hear it from someone to believe that it's real.

abduraooft
05-20-2008, 05:15 PM
Thanks for that confirmation! Sometimes I just need to hear it from someone to believe that it's real. But not always!

Anyway, the link that you have posted can make some considerable improvement!
How about applying right border to the #content-left directly(since this is your ultimate aim), rather than applying border-left to its adjacent element? Say


#content-left {/*style.css (line 249) */
border-right:1px solid #C1C1C1;
float:left;
width:525px;
}


Then change the width of this element to say some 550px and then remove the margin-left of the other element.

Let's know if this is not OK.
Nice theme and layout, I like it :)

pandabunny
05-20-2008, 06:11 PM
Ok, it's definately "getting there", but I think I tried something like that before, and the reason I ended up making the border-left encompas only from "search articles" down is because the left border does not start till after the "peta living" logo.

Here is what it looks like with those changes: http://dev.peta.org/living2/

I am also not sure if it will work if the main content is sometimes shorter than the nav. (I suspect it will be, because that's just the way things go. :p)

Thanks for helping, and thanks for the nice comment, although I can only be credited for the cute little birdies and the logo! The layout design was a group effort ;)



But not always!

Anyway, the link that you have posted can make some considerable improvement!
How about applying right border to the #content-left directly(since this is your ultimate aim), rather than applying border-left to its adjacent element? Say


#content-left {/*style.css (line 249) */
border-right:1px solid #C1C1C1;
float:left;
width:525px;
}


Then change the width of this element to say some 550px and then remove the margin-left of the other element.

Let's know if this is not OK.
Nice theme and layout, I like it :)

abduraooft
05-20-2008, 08:15 PM
Alright! since you are using a fixed with layout you could easily achieve your goal by a faux-column aproach, see www.alistapart.com/articles/fauxcolumns/

Jus create a 980px(width of your) X 1px horizontal image, having a 1px dot at a specific place , say at 560px (width+pading of left).
Then apply it as the background of #wrapper and apply repeat-y. You could still use the boder for people who blocked images in their browser (but they get a partial result, just like the curent border)

Hope it's clear!

pandabunny
05-20-2008, 10:09 PM
Ok here it is:
http://dev.peta.org/living2/

I left the old line in there just to see what was going on.

Unfortunately, when I try to change the values after "repeat-y" (50% 0;) to something else, like (50% 100;), the line just disappears!
\:eek:


Alright! since you are using a fixed with layout you could easily achieve your goal by a faux-column aproach, see www.alistapart.com/articles/fauxcolumns/

Jus create a 980px(width of your) X 1px horizontal image, having a 1px dot at a specific place , say at 560px (width+pading of left).
Then apply it as the background of #wrapper and apply repeat-y. You could still use the boder for people who blocked images in their browser (but they get a partial result, just like the curent border)

Hope it's clear!

abduraooft
05-21-2008, 09:22 AM
Now just apply background-color:#fff;(or the required value) to #header and #footer.

PS: float:left; for #header is completely of no use, just remove! And I think width:545px; is OK for #content-left.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum