[Jack Eagles1]

Hey, I can achieve a border for my entire document by adding this CSS to my webpage.

<style type="text/css">
BODY
{
border-left: solid 300px Blue;
border-right: solid 300px Blue;
} 
</style>

However, I want the borders to 'Go along' the whole height of my webpage. At the present, I only see this:

(The border only extends as far as the content...)

Does anyone have any ideas as to how I can extend it to cover the entire height of the webpage, rather than just the part which the content extends to. I hope I have explained the problem. Thanks!


EDIT: This doesn't work either:

<div id="RSidebar" color="red" position="absoloute" top="0" right="0" width="200" height="100%"><p>Content Here</p></div>

This post has been edited by Jack Eagles1: 23 June 2010 - 04:22 AM

[husseycoding]

Hi Jack,

I'm not sure I'm understanding what you are trying to achieve exactly here. Are you trying to create a background block colour with the rest of the content on top or are you trying to have a border around the edge of the viewable are with the content in the middle?

What you have done there is set the left and right border width to 300px, is that what you are trying to do?

This post has been edited by husseycoding: 23 June 2010 - 05:05 AM

[Jack Eagles1]

I want ot have two borers on either side of my webpage, which extend down the entire page, rather than just how far the content extends to. See Image

[husseycoding]

Ah ok, I see what you mean now.

Well the way I would do this would be to create a new div rather than use the body tag, and give the div the following CSS properties:

#somenewdiv
{

position:fixed;
margin:0px;
padding:0px;
top:0px;
left:0px;
width:100%;
height:100%;
border-left: solid 2px #0000ff;
border-right: solid 2px #0000ff;

}

As you are setting the position of the div to fixed, it gets effectively 'removed' from the page and is no longer inline with the rest of the content, so the other content should sit behind the div with no problems.

If the content of the page is wider than the window and you want the border to sit at either the edge of the content, or the edge of the window (whichever is wider) then you might want to consider a small javascript function utilising the scrollWidth property.

This post has been edited by husseycoding: 23 June 2010 - 05:28 AM

[Jack Eagles1]

Hey, Thanks for that - It worked! The only thing is, when I tried to adapt it for my right border, It didn't work. That might just be because I can't write CSS properly, or it might be for some other reason. Here is my code:

#Sidebar
{
position:fixed;
margin:0px;
padding:0px;
top:0px;
left:0px;
width:100%;
height:100%;
border-left: solid 160px #0000ff;
border-right: solid 160px #0000ff;
}

#Sidebar2
{
position:fixed;
margin:0px;
padding:0px;
top:0px;
left:100%;
width:100%;
height:100%;
border-left: solid 160px #0000ff;
border-right: solid 160px #0000ff;
}

So 'Sidebar' works fine, but 'Sidebar2' is not visible. I want it to mirror 'Sidebar', but on the left side of the document. Therefore I just put left to 100%, but that didn't work. Any suggestions?

[husseycoding]

Ah ok, I thought that this might happen actually after I posted that first reply. Are you by any chance seeing the left hand bar but not the right hand bar?

This is because the div width property doesn't take into account the border, so if you have a div which is 100px wide, and a border left and right of 2px each, then the total width of the div is actually 104px because of the 2 borders of 2 pixels each. So in your case the right hand border is appearing outside of the 100% width, and thus off screen.

This page has a diagram that shows it nicely.

What I would do in this case is to instead of using the border property of the div, have no margin, padding or border and just set the background-color of the the div and size it so that it looks like the border. You can then have one on each side to make the left and right borders:

#borderleft
{

position:fixed;
margin:0px;
padding:0px;
top:0px;
left:0px;
width:2px;
height:100%;
background-color:#0000ff;

}

#borderright
{

position:fixed;
margin:0px;
padding:0px;
top:0px;
right:0px;
width:2px;
height:100%;
background-color:#0000ff;

}

That should correctly create a blue 'border' 2 pixels wide on the left and right of the page

[Jack Eagles1]

Fantastic! Thankyou so much!

[husseycoding]

Glad I could help