CSS - div #foo vs div#foo - How a space cost me an hour worth of frustration

I start "coding" again and quickly ran into the "pulling my hair out" moment on why I cannot troubleshoot the simplest of things. By "coding," I mean working on stylesheets. Yes, I have not even reached the real code stuff (yet I suppose I do have much fewer frustrations there because the syntax is more strict there).

So, I am working on a layout with a site div that contains many sub-divs which may also have additional sub-divs. I was able to get styles up quickly and easily, then I wanted to add a width to the highest parent of divs and for some reason it would not work. I tried all sorts of combinations of switching ids, spell checking, and checking other divs. It works for all the divs except the parent one.

Here is basically my layout:

 

 

   

 

 

And my style sheet:
div #foo { width: 800px; border: 1px solid black; }


No matter what I did, nothing happened, yet if I changed #foo to #top or any other id, I would have a banner. Then finally, I removed food and made it separate from the other divs completely. Suddenly, I had no borders at all except for left, content, and right.

This made me realize that having a space meant the sub-object of the previous object. In other words, CSS is looking for an object named foo inside of a div. Because foo is the parent div, there is no parent div thus CSS does not find a foo instead a div. This is why all the other divs changed accordingly because they were all within a div, foo (whether it was named or not).

So the proper way that I should have coded this was to remove the space between div and #foo, thus making it div#foo. All my problems went away! FINALLY! Nothing like this to remind how foolishly amateurish I can be.

Even #foo would work, but I thought I would be cool by being a little more specific. Even in hindsight, I should have known this because I have used similar practice with classes. Although, I admit that I actually didn't know this difference even though I have developed websites for several years. Usually, I have a placeholder div so I never ran into this problem but not realizing that was what kept all my designs working. Of course, I decided today to not do that because I just felt like making the design insignificantly more efficient.

As for searching on google, this was not easy to find because "css style not working" brings up a lot of results. And "css style working on all objects except parent" did not return what I was looking for. Defining this issue is still not simple even though I have figured out the problem. Perhaps, this problem is too easy to even be mentioned. Hopefully (or perhaps not), I am not the only person to run into this problem and this would help someone in the future........ perhaps my future self!

Center div with table content and fit to content

style="border: 1px solid black; display: table; padding: 0px 25px 25px 25px; margin-left: auto; margin-right: auto;"

The trick for me is the "display: table" portion which seems new to me but did exactly what I wanted it to do. I wanted a div containing a table to be centered into the middle of the page.

Without the display parameter, the div defaults to the full width of its parent container which then obviously would not have margins to auto-fill. Floating the div would only keep it to the left (obviously but still had to try). The stackoverflow articles also contained some other alternatives but this one seemed cleanest for what I needed.


Reference
http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents
http://stackoverflow.com/questions/19620051/how-do-i-let-width-of-table-determine-width-of-entire-page

Work Life: Correcting 100% Width Text Input to Fit into Container

I always find it odd that the default values of HTML for textboxes (aka text inputs) when you set the width to 100% always seem to be wider than than its container. 

By default, you would think that it would either contain the entirety of the textbox or spill over on all sides of the textbox. In the latter case, I expect to see overlap on the left as well as on the right.

To correct this, set your textbox style to the follow:

input

{

    margin: 0px;

    padding: 0px;

    border: 0px;

}

Default

Corrected

This happens in both IE10 and Google Chrome 33.0.1750.117 m.