Ok, I'm not sure how to explain this but here goes...
If I create a navagation area that floats to the left within the parent element and another element that will be to the right of that - say that's the body.
Ok, so we have the navagation area (to the left) and the body of the page (to the right of the nav area). I think this should be a standard layout.
So here's my problem - or question??? I can't figure out how to make the background area of the nav area the same height of the body area.
I want the nav area to have a blue background and the body area to be white AND I want the nav area's background to stretch to the height of the body so that if the body is 1000px's long so will the blue background in the nav area.
You know with tables, the <td> to the left of the second <td> will have the same height. HOW do you do this with CSS?? Can you??
Thanks.You'll want to use Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->). A primer on how floats work (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51576">http://www.webdeveloper.com/forum/showt ... adid=51576</a><!-- m -->) is a good read too (Read my first post in the thread).You know with tables, the <td> to the left of the second <td> will have the same height. HOW do you do this with CSS?? Can you??
An alternative to the image suggestion above is to use a very thick padding, and then a negative margin to pull your sidebar into that area. It's a little trickier conceptually, but you save on an image, and it doesn't lock you into a fixed width. (No, I don't want to hear about your 3000 pixel width images...)
Here's a super-quick example of what I mean: <!-- m --><a class="postlink" href="http://uwmike.com/layout/bordercolumn/">http://uwmike.com/layout/bordercolumn/</a><!-- m -->
You can tile images in both areas with no trouble at all. This is a similar method to that which Piefecta uses, but I've just stripped it back so that you can more easily see what's going on.
(Like I said, I just made that it a few minutes, so please don't assume that it's been bug-tested across a lot of different browsers... I only checked FF and IE6)Always wondered how that was done. Good simple example mikepurvis
I just noticed that the original poster was asking for a left-side sidebar. Well, here's the identical markup, with two slightly altered sets of styles depending on where you want the sidebar:
<!-- m --><a class="postlink" href="http://uwmike.com/layout/bordercolumn/?style=left">http://uwmike.com/layout/bordercolumn/?style=left</a><!-- m -->
<!-- m --><a class="postlink" href="http://uwmike.com/layout/bordercolumn/?style=right">http://uwmike.com/layout/bordercolumn/?style=right</a><!-- m -->
(Just to note-- the left-side styles are a little awkward, and although I can't verify this, I think based on my experience, you might get a horizontal scrollbar in Safari. There's cleaner ways to do the left-side sidebar, but this was the first one I found that didn't bork IE.)Thanks for the replies. I will try to wrap my head around this code from mikepurvis to adapt it for different situations, like a nested 2 column layout inside of a 3 column layout.
If I create a navagation area that floats to the left within the parent element and another element that will be to the right of that - say that's the body.
Ok, so we have the navagation area (to the left) and the body of the page (to the right of the nav area). I think this should be a standard layout.
So here's my problem - or question??? I can't figure out how to make the background area of the nav area the same height of the body area.
I want the nav area to have a blue background and the body area to be white AND I want the nav area's background to stretch to the height of the body so that if the body is 1000px's long so will the blue background in the nav area.
You know with tables, the <td> to the left of the second <td> will have the same height. HOW do you do this with CSS?? Can you??
Thanks.You'll want to use Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->). A primer on how floats work (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51576">http://www.webdeveloper.com/forum/showt ... adid=51576</a><!-- m -->) is a good read too (Read my first post in the thread).You know with tables, the <td> to the left of the second <td> will have the same height. HOW do you do this with CSS?? Can you??
An alternative to the image suggestion above is to use a very thick padding, and then a negative margin to pull your sidebar into that area. It's a little trickier conceptually, but you save on an image, and it doesn't lock you into a fixed width. (No, I don't want to hear about your 3000 pixel width images...)
Here's a super-quick example of what I mean: <!-- m --><a class="postlink" href="http://uwmike.com/layout/bordercolumn/">http://uwmike.com/layout/bordercolumn/</a><!-- m -->
You can tile images in both areas with no trouble at all. This is a similar method to that which Piefecta uses, but I've just stripped it back so that you can more easily see what's going on.
(Like I said, I just made that it a few minutes, so please don't assume that it's been bug-tested across a lot of different browsers... I only checked FF and IE6)Always wondered how that was done. Good simple example mikepurvis
I just noticed that the original poster was asking for a left-side sidebar. Well, here's the identical markup, with two slightly altered sets of styles depending on where you want the sidebar:<!-- m --><a class="postlink" href="http://uwmike.com/layout/bordercolumn/?style=left">http://uwmike.com/layout/bordercolumn/?style=left</a><!-- m -->
<!-- m --><a class="postlink" href="http://uwmike.com/layout/bordercolumn/?style=right">http://uwmike.com/layout/bordercolumn/?style=right</a><!-- m -->
(Just to note-- the left-side styles are a little awkward, and although I can't verify this, I think based on my experience, you might get a horizontal scrollbar in Safari. There's cleaner ways to do the left-side sidebar, but this was the first one I found that didn't bork IE.)Thanks for the replies. I will try to wrap my head around this code from mikepurvis to adapt it for different situations, like a nested 2 column layout inside of a 3 column layout.