CSS - Page border
- Started
- Last post
- 15 Responses
- Nightshade
Hey guys, any idea how to get a border to wrap entirely around the 'page'?
CSS Sandbox link: http://cssdesk.com/jcUTd
- HAYZ1LLLA0
Try height 95%
- Nightshade0
No good because I want the border to be a fixed 25px width
- Nightshade0
Oh and I tried this but no good as the top/bottom borders don't scroll: http://cssdesk.com/CTE43
- albums0
- Doesn't work with longer content - bottom border should come after content: http://cssdesk.com/L…Nightshade
- animatedgif0
- Needs to be the height of the page - and if you use height: 100%, it does 100% + 50px = scrollingNightshade
- doesn't retain border when full
http://cssdesk.com/7…albums
- seeessess0
not the most elegant of solutions, but it works http://cssdesk.com/5LDRe
- ahh, see others above did the same :Dseeessess
- scroll that
http://cssdesk.com/a…albums - fixed by changing body to min-heightseeessess
- albums0
i believe that either animated gif or I have solved your problem.
His does it the correct, traditional way with the border after the content.
My way forces the border to the window frame.
Which one do you want?
- scroll that
http://cssdesk.com/a…albums - oopsalbums
- my link was intended for the above post, it was an edit of seeessess' postalbums
- scroll that
- Nightshade0
seeessess' http://cssdesk.com/5LDRe solution is nearly right - but doesn't work if there is a small amount of content - see http://cssdesk.com/RuaXp
The black border should fill to the bottom of the browser window in this case. If I apply height: 100% to .wrapper to fix this, it pushes the border below the window height, causing scrolling.
I wonder if this is possible without some JS...
- seeessess0
Your brief is almost as bad as the ones I see on a daily basis! Draw a picture of what you mean, it's the easiest way sometimes.
- Nightshade0
- Looks fine in Chrome/Safari here, just FF playing upNightshade
- BarryEvans0
why does it have to be a CSS border? wouldn't it be easier to make it browser compatible if it was just 2 images
- Nightshade0
Got this working now guys. On my own site I had to add a html{ position: relative; } to get it to work. Many thanks.
I'll post up the link of the finished site once done.