I've been racking my brain on this one, but can't come up with a solution. What I'm looking for is to create a column by using a background for the body, so that it extends above and below and encompasses the actual column, thus I can't use a div with a background. Normally this would be easy, just use a background image with repeat-y. Except, I need for this faux column to be a certain percentage of the page, I'm thinking 20% or 25%. But I'm unsure of how to go about this. Anybody have any ideas?Is there any reason why you can't just put the div inside another div with the background you want and use padding on it (or something like that)?Or just use a div with the background image and padding (so that the background image "extends above and below and encompasses the actual column")?I guess I could throw in another div, though I like minimalizing the markup. But perhaps there isn't a real choice here. It's more than just throwing on top and bottom padding. There's an overlapping header and footer there as well, erm, here:
| | |
| +-------------------------------------------------+ |
| | Header | |
| | | |
| +-------------------------------------------------+ |
| | |
| Main Content | Column |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| +-------------------------------------------------+ |
| | Footer | |
| +-------------------------------------------------+ |
| | |Seems to me you could have a y-repeat background image positioned to the right within the body style. Your header and footer would then be assigned some opaque background color (or image) with appropriate left/right margins, while your right-column div would have its background-color be transparent.Originally posted by NogDog
Seems to me you could have a y-repeat background image positioned to the right within the body style. Your header and footer would then be assigned some opaque background color (or image) with appropriate left/right margins, while your right-column div would have its background-color be transparent.
? I think I know what you mean. Except, the column is a relative width, based on the width of the screen. It's width is 20%. So, how can I make the background image a relative width? It's that, or I can try extending the column, but I don't think it's possible to make the column have a height of 100% of the page, eh?Hmmmm...I came up with something yesterday that worked pretty well in Firefox, but absolutely blew chunks in IE6. I haven't quit thinking about it, though. 
Thanks for trying. I came up with a solution in which I had a container div with my navigation floated right, and then another div with content with it floated left and a background, so it worked. Yay! THanks.Originally posted by MstrBob
Thanks for trying. I came up with a solution in which I had a container div with my navigation floated right, and then another div with content with it floated left and a background, so it worked. Yay! THanks.
Where, WHERE? I wanna see it! Sounds great!
Wed, 26 Jan 2005 21:22:20Originally posted by MstrBob
Thanks for trying. I came up with a solution in which I had a container div with my navigation floated right, and then another div with content with it floated left and a background, so it worked. Yay! THanks.
Sounds quite similar to what I was trying, but I was using % values to set some widths and margins, and FF and IE seem to interpret these differently (FF interpreting them as % of the containing element while IE interprets them as % of the page width).Originally posted by NogDog
Sounds quite similar to what I was trying, but I was using % values to set some widths and margins, and FF and IE seem to interpret these differently (FF interpreting them as % of the containing element while IE interprets them as % of the page width).
IE actually behaved remarkably well, considering. I always have issues with margins and padding, so I just eliminated them all together for the container divs. I've actually nixed the idea now, but to see, here's the page:
<!-- m --><a class="postlink" href="http://wdhaven.com/rewidth.php">http://wdhaven.com/rewidth.php</a><!-- m -->
My main issue was that the containing element of the root element is the browser window. That's one of the things that upsets me about the CSS 2.1 specs. If the root element's 100% width based on the entire document size, I could have used a background on HTML and BODY, but no. Stupid specs.
Got it working though, just had to Think Outside the Boxmodel.
| | |
| +-------------------------------------------------+ |
| | Header | |
| | | |
| +-------------------------------------------------+ |
| | |
| Main Content | Column |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| +-------------------------------------------------+ |
| | Footer | |
| +-------------------------------------------------+ |
| | |Seems to me you could have a y-repeat background image positioned to the right within the body style. Your header and footer would then be assigned some opaque background color (or image) with appropriate left/right margins, while your right-column div would have its background-color be transparent.Originally posted by NogDog
Seems to me you could have a y-repeat background image positioned to the right within the body style. Your header and footer would then be assigned some opaque background color (or image) with appropriate left/right margins, while your right-column div would have its background-color be transparent.
? I think I know what you mean. Except, the column is a relative width, based on the width of the screen. It's width is 20%. So, how can I make the background image a relative width? It's that, or I can try extending the column, but I don't think it's possible to make the column have a height of 100% of the page, eh?Hmmmm...I came up with something yesterday that worked pretty well in Firefox, but absolutely blew chunks in IE6. I haven't quit thinking about it, though. Thanks for trying. I came up with a solution in which I had a container div with my navigation floated right, and then another div with content with it floated left and a background, so it worked. Yay! THanks.Originally posted by MstrBob Thanks for trying. I came up with a solution in which I had a container div with my navigation floated right, and then another div with content with it floated left and a background, so it worked. Yay! THanks.
Where, WHERE? I wanna see it! Sounds great!
Wed, 26 Jan 2005 21:22:20Originally posted by MstrBob
Thanks for trying. I came up with a solution in which I had a container div with my navigation floated right, and then another div with content with it floated left and a background, so it worked. Yay! THanks.
Sounds quite similar to what I was trying, but I was using % values to set some widths and margins, and FF and IE seem to interpret these differently (FF interpreting them as % of the containing element while IE interprets them as % of the page width).Originally posted by NogDog
Sounds quite similar to what I was trying, but I was using % values to set some widths and margins, and FF and IE seem to interpret these differently (FF interpreting them as % of the containing element while IE interprets them as % of the page width).
IE actually behaved remarkably well, considering. I always have issues with margins and padding, so I just eliminated them all together for the container divs. I've actually nixed the idea now, but to see, here's the page:
<!-- m --><a class="postlink" href="http://wdhaven.com/rewidth.php">http://wdhaven.com/rewidth.php</a><!-- m -->
My main issue was that the containing element of the root element is the browser window. That's one of the things that upsets me about the CSS 2.1 specs. If the root element's 100% width based on the entire document size, I could have used a background on HTML and BODY, but no. Stupid specs.
Got it working though, just had to Think Outside the Boxmodel.