Setting right border of panel with CSS-P

I'm messing around with CSS-P trying to get a sense for what does what, and how to use CSS instead of tables. I'm working on a new site and would like to use the new site as a learning experience for using CSS.

My design goal is to have a teal colored column 150px wide running down the left side of the page. I want to use this column for navigation purposes. When I type text in the <div> with the appropriate style called, the text causes the column to expand beyond 150px instead of wrapping around at the 150px point. How do I set the right side of the column to not move at all? here's the class as i have it written:



Thanks for any help you can send my way. I've been reading all over the place on this, and I can't find anything about making the overall width of the column absolute.

mark

Do you have an example page?

here's what i have thus far

http://www.nriyounglife.org/csstest.htm

the other thing i want to do is get the background to begin at the right edge of the teal column, rather than begin behind the column at the left side of the browser window. that's a task for a different day though =)

mark

the way your doing this is correct CSS2. It works fine for me, although I use the shorthand notations when possible like this...



you might want to relieve the edge a bit with some padding as well



in this notation the first dimension is top, then it goes clockwise...right, bottom and left.

for the background, you can set your BODY selector thusly:



this would cause your bkgnd image to be offset 150px and only tile in the y direction.

HTH!

actually, it does help. thank you. I guess the answer is there is no way to set the right border of the column absolutely then? The teal column created with the <div style=> statement will expand to fit whatever i put in there. if i put a 200 px wide image in the column, the column will expand to hold the image, even though the column width is set to 150px. is this correct?

Mark

It really shouldn't. When you set a width with an absolute dimension (e.g. 150px) it shouldn't react like a table cell, it should be fixed. If the text doesn't wrap (and it does for me), if anything it would flow outside of the div box.

The problem I'm having is replicating what you're getting.

This is a complete shot in the dark, but are you using an obscure browser? I tested this in IE6, Moz1.3a, and Opera 7 - each were identical. Here's a screen shot of Moz...



and here's the code...

I should also mention, on the padding, that there is a really odd, ugly, unforgivable weirdness in Moz where it doesn't add padding to the inside of the width, but adds the padding to the overall width (nasty). So the workaround is to nest a div, relatively positioned with a fixed with to create your padding. The code might look something like this....




They may have fixed this problem. I should really update my Mozilla, but I like to keep my version slightly behind the current for testing purposes.

It's still behaving the same odd way. I posted a version of the page with an example of what it's doing at http://www.nriyounglife.org/csstest.htm .

Would it matter that I'm using an external style sheet rather than an embeded style sheet?

Mark

no on the external style sheet. doesn't make a difference as far as I know.

I see what's happening in your page though. You're using a continuous string, so there's nowhere for the wrap to happen. In my example I was using Lorem Ipsum. The browser going to need the spaces in between the words to figure out where to wrap.



sorry, i breezed right by your link. my bad.

btw: in your HTML, you've got a /DIV as the first element after the BODY tag.

and...

in your style sheet, in the def for the BODY selector, you have a "background-border" which i've never heard of. Is this proprietary to a certain browser? I looked through the W3C spec and didn't see it. Maybe it was a typo, but I see you're using front page...yadda yadda yadda...do you know?

ohhhhhhh, ok. i didn't realize the browser behaved like that. i guess i was thinking it would wrap around automatically once the text hit the border. once i put some spaces in there, it did wrap properly.

always something new to learn about how this stuff works out in the wild!!

the background-border, i have no idea about. front page has been inserting some odd characters in the sheet when i save, so it may have thrown it in automatically and i just never noticed. but it's also entirely possible i was spaced out when i was typing. CSI was on while i was working on the sheet

mark

lol

what's wrong with having a <div> as the first element in your body? i had been reading at http://www.mako4css.com/BasDiv.htm to try and become more familiar with using CSS, and that seemed like the way to insert the classes into the html document.

mark

Mark,

Other than the difference you two have in the style sheet, the instructions are the same. So the question is why dM's works and your's doesn't.

I would suggest looking at your Doctype declaration vs. dM's -- you'll note he has one and you don't. I bet that would solve your problem. I've talked about doctype and how it affects the display of a page in recent posts.

yeah, that thought had occured to me too. for now i'm just messing around with the page, but i might give that a try and see what happens.

mark