CSS Border height

[Evilsmoothie]

Basicly I'm trying to have a border on my content and I want it to go from the top to bottom without interfering with my header or footer. I can't use a specific numbers of pixels since the content won't be the same on every page so the height will also be different.
Hard to explain so I illustrated it.

You must be registered for see links

How would I go about having the border cover 100% of the content-area height and not 100% of the site?
Thanks.

 

[TesoMayn]

border-top
border-bottom
border-left
border-right
lrn2google

 

[Evilsmoothie]

border-top
border-bottom
border-left
border-right
lrn2google

lrn2read. I'm not looking for how to get a border.

 

[Snappy]

Well on the two divs you would need to put border-right and border-left then pick the width. The height will be as long as the div is.

 

[Evilsmoothie]

Well on the two divs you would need to put border-right and border-left then pick the width. The height will be as long as the div is.

It's hard to explain when English ain't the tongue but Ill try.. I got these two borderlines, as we've already established. I want those two lines to go from the header to the footer (the content space). Thing is that the content div doesn't have a preset height because the content of the content spot won't be the same for every page. Is that clearer or more confusing?

 

[Snappy]

It's hard to explain when English ain't the tongue but Ill try.. I got these two borderlines, as we've already established. I want those two lines to go from the header to the footer (the content space). Thing is that the content div doesn't have a preset height because the content of the content spot won't be the same for every page. Is that clearer or more confusing?

Hmmm I'm not to sure so technically you just want two lines going from the header to footer? I know this is stupid but you could make them a div and then style it to be the width and length of 100% or something like that and use that as the borders?

 

[JayC]

All you would have to do is create a thin div box filled black color and make the position fixed. Why would you ever want to make a border on a thin line when you can fill it

 

[Evilsmoothie]

Hmmm I'm not to sure so technically you just want two lines going from the header to footer? I know this is stupid but you could make them a div and then style it to be the width and length of 100% or something like that and use that as the borders?

That's what I've tried. When I put in 100%, it takes 100% of the entire screen and not 100% of what is left.

All you would have to do is create a thin div box filled black color and make the position fixed. Why would you ever want to make a border on a thin line when you can fill it

Uhm.. What?

 

[JayC]

K

HTML:
<div style="line">

</div>

CSS:
Line{
Color: black;
Length: 100%;
Height: 5%;
}

Adjust the height to cover the rest of the area

If you just want a line across the screen then don't use div boxes at all

HTML:
<hr />

CSS:
Hr {
Height: 5%
}

 

[Sysode]

K

HTML:
<div style="line">

</div>

CSS:
Line{
Color: black;
Length: 100%;
Height: 5%;
}

Adjust the height to cover the rest of the area

If you just want a line across the screen then don't use div boxes at all

HTML:
<hr />

CSS:
Hr {
Height: 5%
}

Uh, yeah, I'm not sure you know what you're saying here. The 'length' is not even CSS at all, so it'll do nothing. You haven't even selected the css class properly, you've just given it a name which isn't valid at all. Also, you've given the div internal style and used it as a class?

Anyway, you can achieve this by using the min-height: in CSS. the only drawback is that it will be a fixed height (if the content goes smaller than 20px) but you can adjust this to your needs. It'll extend with added content.
You can refer to my pen for a better example of what I mean, if you need any extra help just ask. Pen:

You must be registered for see links

 

[JayC]

Lol sorry

Uh, yeah, I'm not sure you know what you're saying here. The 'length' is not even CSS at all, so it'll do nothing. You haven't even selected the css class properly, you've just given it a name which isn't valid at all. Also, you've given the div internal style and used it as a class?

Anyway, you can achieve this by using the min-height: in CSS. the only drawback is that it will be a fixed height (if the content goes smaller than 20px) but you can adjust this to your needs. It'll extend with added content.
You can refer to my pen for a better example of what I mean, if you need any extra help just ask. Pen:

You must be registered for see links

didn't realize I fucked that up bad, I was rushing length isn't even anything it's width I was thinking of and the length is suppose to be height haha I'm on my phone so it's hard to scroll up and down.

 

[Evilsmoothie]

Uh, yeah, I'm not sure you know what you're saying here. The 'length' is not even CSS at all, so it'll do nothing. You haven't even selected the css class properly, you've just given it a name which isn't valid at all. Also, you've given the div internal style and used it as a class?

Anyway, you can achieve this by using the min-height: in CSS. the only drawback is that it will be a fixed height (if the content goes smaller than 20px) but you can adjust this to your needs. It'll extend with added content.
You can refer to my pen for a better example of what I mean, if you need any extra help just ask. Pen:

You must be registered for see links

Well.. Yeh, but the problem now is different screen sizes, isn't it? Damn it.. How hard can this be? I suppose 60% on my laptop isn't the same 60% as on my "bigrig" when the screens are two different sizes..

 

[Sysode]

Well.. Yeh, but the problem now is different screen sizes, isn't it? Damn it.. How hard can this be? I suppose 60% on my laptop isn't the same 60% as on my "bigrig" when the screens are two different sizes..

That's a different issue. Just have a fixed width (in pixels) and alter that width for the resolutions that need it via media queries or use percentages and change the percentages on the resolutions that need - its your choice

 

[Evilsmoothie]

That's a different issue. Just have a fixed width (in pixels) and alter that width for the resolutions that need it via media queries or use percentages and change the percentages on the resolutions that need - its your choice

I suck at this but I solved it. Made it 100%, fixed, top:0 and z-index:-1. Took me 14 hours to figure that out ...