i have been using tables for years to do all my design... and finally just got fed up with nesting to such ridiculous degrees trying to get what i want... i designed my blog with tables and spent some time trying to convert it over to CSS and div tags...
what i want is the brown 16px border going down the side next to the scrollbar.. follow the links to see what i mean
the tables version:
http://www.wornpath.net/galexkeene/index.html
note: this is actually broken since ive messed with the css file, but you can see the start of the border
the css version:
http://www.wornpath.net/galexkeene/index2.html
the css file:
http://www.wornpath.net/galexkeene/galexkeene.css
ive tried moving things around and putting div tags in all sorts of ways and just cant get it right... what am i doing wrong!
16px border down the right side of the site
There are various ways to do this. A very quick way would be to use an absolutely position element. Here's an example:
CSS is in the source code.
With this way, you'd have to make sure the text aligned to the right has ample margin space to clear the div (since I've used absolute positioning, the div will be taken out of the flow of the code, and not interact with the other elements (thus may cover the text)).
As mentioned, there are other more standard-based ways. But this may be the quickest (read easiest )
i tried that..
i tried doing that.. but then i run into the problem of height. how do i set the height so that it goes from the banner to the footer?
16px border down the right side of the site
You don't need to worry about that do you? It looks to me as if the border runs all the way down from top to bottom (of the window).
Therefore, since it's absolutely positioned, it'll run over the top banner and down the side.
Or is the bit over the banner slightly different?
down the side
no over the banner is fine.. what i mean is, how do i get it to go all the way down the side? just set height to 100%?
16px border down the right side of the site
That's right... here's the CSS I used:
div#right { position: absolute; right: 0; top: 0; height: 100%; width: 10px; background: #630; z-index: 100; }
16px border down the right side of the site
ok, great thanks!
16px border down the right side of the site
PROBLEM!!
ok.. i did what you said.. which i realize now i had done before... and if you go to the page, you'll see that even with a height of 100% the sidebar wont go all the way down...
page: http://www.wornpath.net/galexkeene/index2.html
<div class="sidebar2"> </div> .sidebar2 { background-color: #3A3124; position: absolute; top: 85px; right: 0px; width: 16px; height: 100%; }
[/code]
16px border down the right side of the site
Ah yes... I forgot about this little problem.
Since I got you into this mess, I thought I might as well have a crack at fixing it :roll: .
Here's the link to an update (minus your images, but they won't figure in any of the problem):
http://pub.c-o2.net/right/index.htm
The problem, as you can see from the original, is that the height is 100% of the browser window. Obviously, the content goes beyond the viewport, and past 100%. The fix would be to somehow 'fix' the dark right-hand border to the content. So, this has been done. I've given the content div a border-right comparable to the border you need. Then fixed it to the right of the browser window (with right: 0; ). I've removed the 'left: 100px;' which makes it default to 0px of the parent div (which you classed as .mainbody I think, but I've removed this CSS rule, since you only put in a width of 100%, and by default, a div will be 100% width anyway).
Anyway, adding 100px left margin to the content div, puts the text in its' rightful place.
I've moved a few more things around (think the footer code may have been transposed further up). Oh, and the nav div needs to be absolute, otherwise in IE6, the content div stops at the beginning of the nav div.
I've checked in Safari and Firefox and it seems fine. IE6 is also fine on XP (as is Firefox).