Can't expand box with

[george]

A box in the center of nested boxes will not hold a wider width. Here are my nested boxes from outer most to inner most

<div id="container">

<div id="maincntnt">

<div id="innerarea">

<div id="rightpane" class="contentrt">

<div id="messageBx"></div>

I can not make the width of messageBx any wider than 310pxHere is the CSS in the same order

.oneColfxdEM #container { width:60em; margin: 0 auto; text-align: left; }.oneColfxdEM #container #maincntnt { width:60em; margin: 0 auto; text-align: left; height:600px; }.oneColfxdEM #container #maincntnt #innerarea .contentrt { padding:55px; }.oneColfxdEM #container #maincntnt #innerarea .contentrt #messageBx { position:relative; left:-45px; overflow:visible; border:#0000FF thin solid; width:310px; height:98px; }

That 310px on the last line I want to be closer to 500px. Here is the site. Please ignore links as it is being worked on.

[Spunky]

Is it ok to be mixing whether you are using em or px? I would imagine that could be an issue. I don't know how many pixels 60em comes out to but perhaps its not big enough to fit something inside of it at 500px which is why it wont go bigger than 310px?I dont use em personally, though I do know it'd widely used. I just stick with pixels. Personal preference I guess. But this is my guess to your issue.

[Spunky]

Ok I figured it out. I was on the right track with my first post. But it doesnt have to do with the 60em. However what you want to be larger than 310px cannot be because, as I did correctly state, there isnt enough room.What you didn't post was that this is inside a box that is only 780px wide.

.oneColfxdEM #container #maincntnt #innerarea { margin-top:80px; margin-left:80px; background-color:#FFCC00; width:780px; height:335px; }

Then inside of that is your left content and right content boxes. Which means the max width of those (although is set to auto) can only be 390px. So making a message box within that simply does not fit. The reason it can't go more than 310px is probably because of any paddings you've got set up there as well. It's all squashed together and confusingly coded for me, but I tried to figure out exactly what is shrinking it even more.If you add borders to your elements you can kind of get an idea of how it's laying out. I notice your right content area is bigger than your left, but it may not be equaling 500px after padding, or even before since it is not much bigger.

[george]

my guess to your issue.

And a good guess it is. I am learning also. I want to learn to position using em because I believe it will allow me greater cohesion across browsers which display different default sizes for the heading elements (h1 h2 etc.) I have just learned on here how to correct for the different sizes rendered by Firefox and IE for the heading tags This is the link for the W3Schools example on this issue. I don't believe mixing em and px creates my problem. em is just the width in pixels of the current font - I thinkCheers

[george]

Bingo!

Ok I figured it out.

Yes you did Thank you for taking the time to wade through my code. If you have suggestions to make my code cleaner, please tell me. What I am trying to accomplish with my extensive use of id's to specify an exact place in the DOM is to improve performance by following the DOM map in my CSS. But maybe that's not necessary. I don't know.

[Spunky]

And a good guess it is. I am learning also. I want to learn to position using em because I believe it will allow me greater cohesion across browsers which display different default sizes for the heading elements (h1 h2 etc.) I have just learned on here how to correct for the different sizes rendered by Firefox and IE for the heading tags This is the link for the W3Schools example on this issue. I don't believe mixing em and px creates my problem. em is just the width in pixels of the current font - I thinkCheers

Yea, I know there is a good use to em for a reason of something of that nature, lol, I just haven't quite found a good enough reason to convert. And yea, em is the size according to the font, it looks at the "m" of the font. Something like that. I dont know much about it either, lol.

If you have suggestions to make my code cleaner, please tell me.

Well, just as a personal preference thing I guess, it drives me nuts when people have their CSS all on one line. For example, lets take your code and "clean" it up in my opinion. The top portion of your CSS seems organized, just becomes a mess when you get to the body stuff:BEFORE:

.oneColfxdEM #container #maincntnt #innerarea { margin-top:80px; margin-left:80px; background-color:#FFCC00; width:880px; height:335px; padding:0; }

AFTER

.oneColfxdEM #container #maincntnt #innerarea { 	  margin-top:80px;	  margin-left:80px;	  background-color:#FFCC00; 	  width:880px;	  height:335px;	  padding:0;}

It's just easier to look at and pick out exactly what that portion is trying to accomplish. Plus to go back and change something its a lot more searching when you gotta scan through a line rather than down a column. Also;

What I am trying to accomplish with my extensive use of id's to specify an exact place in the DOM is to improve performance by following the DOM map in my CSS. But maybe that's not necessary. I don't know.

I personally do not use this technique so when I see all those IDs my head spins a little, lol. I think I've used a maximum of 2 # on one CSS style group. But I can still understand it..just not as quickly thats all. I'm actually not sure if this technique improves performance, and if it does if it is a significant enough of an amount or not. I do know that when I took a class where we used CSS all the premade coding always did this but I'm not sure if that's just for learning purposes or not. It would be nice to know if this is a good technique to follow.

[george]

I'm actually not sure if this technique improves performance, and if it does if it is a significant enough of an amount or not. [...] It would be nice to know if this is a good technique to follow.

I agree with you. I'm not sure what 'clean code' means though. Is it human readable code, or computer optimized code? My gut feeling is that if you do not specify where an element is in the DOM, then the browser has to search the whole document for it. But the real reason such coding is used may have to do with compensating for a possible identical ID name. If you specify that this ID belongs within that div, then a naming conflict would not mess with the rendering. That's my theory though. For a site as small as the one I have started, this may not mater. But for a huge site with many people working on CSS files, such specificity my be essential. If you have ever looked at a minified jQuery file, you will notice a whole bunch of gibberish. But look at the same content in a non minified file, and it is human readable. I presume minifying is done for performance sake. Does this apply to CSS as well? And which is classified as "clean"? Hope we get some clarification on this.

[Spunky]

I agree with you. I'm not sure what 'clean code' means though. Is it human readable code, or computer optimized code? My gut feeling is that if you do not specify where an element is in the DOM, then the browser has to search the whole document for it. But the real reason such coding is used may have to do with compensating for a possible identical ID name. If you specify that this ID belongs within that div, then a naming conflict would not mess with the rendering. That's my theory though. For a site as small as the one I have started, this may not mater. But for a huge site with many people working on CSS files, such specificity my be essential. If you have ever looked at a minified jQuery file, you will notice a whole bunch of gibberish. But look at the same content in a non minified file, and it is human readable. I presume minifying is done for performance sake. Does this apply to CSS as well? And which is classified as "clean"? Hope we get some clarification on this.

Well, Jquery has a lot more to render than CSS. You'd think if there was a big issue with performance with huge websites that there would be a way to "minify" CSS too.Considering it is against standards to repeat an ID, that shouldn't be happening anyways.