Small border issue

[Cyanoxide]

Hey there, I’ve been working on a project and I have a fairly large knowledge of CSS but I hit a small problem, my page consists of a main content and a sidebar sandwiched between the header and footer, generic website layout I know but my problem is that I needed to add something to separate the content from the sidebar.

My solution was simple, to use a border either “border-left” on the main content or border-right on the sidebar. After a bit of tweaking with padding I managed to get it all lined up and in the right place, the problem however appeared when I started adding new pages into the mix with different lengths of content, I know I could tweak the border for every page but that would be inefficient and would have to be modified every time I add something to a page.

I tried to fix this by using width 100% and some other ideas that popped into my head but most of them had the same effect which was making the length of all of my pages ridiculously oversized.

I will supply static and fluid preview along with my code if requested, and I appreciate any help I can get on this subject. Feel free to comment on the look of the site if you want to as well, I’m always up for new suggestions.

Fluid preview:

http://www.cyanoxide.co.uk/articlebox/articles.html

Static preview:

http://i29.photobucket.com/albums/c265/seph-53/Untitled-3.png

[virtual]

This is probably a faux columns problems, as the border needs to stretch no matter which column is the longest.
Read this:
http://www.alistapart.com/articles/fauxcolumns/

[Cyanoxide]

Thank you, I don’t normally like cheating like that but it’s done the job so I can live with it, feeling a bit silly now because I didn’t think of that solution despite there being a screen cast on here about it. Again, thank you.

Actually, it didn’t work, it had the desired effect filling the whole height of the page however it isn’t fixed so when the bowser size is changed it is changed too, I thing this is down to the page wrap I’ve got on it, I will fiddle around and try to fix it but I don’t know if I’ll be able to. Any solutions will be appreciated.

[Cyanoxide]

I figured out a solution and thought I’d post it on here just in case someone else had the same problem, my solution is in no way the most effective way but it gets the job done and I see no flaws with it at the moment.

As my original way to go about it was to use border-left on the sidebar to get my desired effect didn’t stretch to the whole page and the faux colour reached the bottom but darted across the page when the browser is resized I decided to fiddle around with everything to try to find a solution and I had a brain wave.

If the sidebars border doesn’t reach the bottom because the main content is to big and vice versa if I did it the other way around why don’t I use both borders at the same time overlapping each other, that way it will always reach the bottom regardless of which has more content. The problem with this was that it is impossible to get them overlapping without shoving the sidebar a mile down the page.

That is when I realised I could use negative space to get them onto of each other for example:
If the main content uses an extra 25pixels to line the two borders right up next to each other then I could add “margin-left: -1px;” to the sidebar to make them overlap.

I imagine there is some catch that I will come across in the future by doing this but for now it works and it may be an easy fix for others with the same problem too.

[Author]

Posts