which messed up are you talking about? columns overlap cause you set height: 100%. Just guessing the wrapper has margin set to produce the gap @ the bottom.
the space at the bottom. I need the columns at 100% height. This is what I am trying to make it look like: http://wf.klevo.sk/uploads/1.2beta-page-edit.png if i remove the margin from that it doesn't do anything :/
think you mean "I need the columns to fill the rest of the page". that is basic math stuff, what's height of header? footer? 10% and 5%, so columns get 85% roughly. the space is actually coming from #container, resetting all to 85% height "corrects" the page. introduces a new problem but oh well.
Well... since stylesheets are only 7 bit ascii in the first place I'd not waste time trying to set a charset on it, there is no reason to be setting width:100% on BODY since that's the default behavior, height on body is treated as min-height so there's no reason to be stating that, your universal reset is incomplete, px fonts are a miserable /FAIL/ for layout and REALLY shouldn't be set on BODY, some consistant formatting in the CSS certainly couldn't hurt, and you are declaring BOTH height and min-height - pick one not both. The biggest problem though is you are trying to assign heights to your columns, which will invariably break. The technique you probably should be using there is called 'faux columns' where instead of actually making your elements that tall, you put a background-image in there tiled on the Y axis to 'fake' the appearance of columns... though that does mean fixing the width of one of your columns - as a rule you can't do dynamic width columns with 100% min-height without resorting to a table. You want that as a div based layout, you have to choose... dynamic columns or 100% min-height, not both. Though much of the problem is you went nuts stating more widths and heights than are needed. If I have time later I'll see what I can come up with - though I suspect the dynamic width columns will need to be axed in favor of fixed width.
Yeah, I was unable to do it with a dynamic width columns, so I fixed the width of the sidebar at 20em, which let me quickly resolve the other little issues. Try this: http://www.cutcodedown.com/for_others/kangaroobin/template.html as with all my examples the directory http://www.cutcodedown.com/for_others/kangaroobin is unlocked so you can grab the gooey bits and pieces - in this case the screen.css and one image used for the faux columns. (3072x1 solid white, 137 bytes) Valid XHTML 1.0 strict, Valid CSS (only resorts to ONE CSS3 property - overflow-y... the rest is valid CSS2)... Tested working in IE 5.5, 6, 7 & 8, Opera 9.63 & 10 beta, FF 2 & 3, Safari 3 & 4, and of course, the latest Chrome. First thing I did was grab my standard baseline markup for a two column layout, and toss in your content. From there in the CSS I added my standard reset - which resets the elements I need... there are smaller resets and larger ones, I've never needed more and the ones that are less tend to break things like forms. 100% min-height layouts are actually fairly easy. Height:100% on Body and HTML lets you declare min-height on your outer wrapper. Opera won't actually obey that unless you set overflow-y on html, thankfully that setting doesn't interfere with other browsers. From there we just make a container div set to overflow:hidden to wrap our floats, and min-height:100%; - problem with that is IE6/earlier has no min-height but will incorrectly treat height as such, but only if overflow is set to visible. Since the height declaration trips haslayout wrapping floats in IE, that change isn't a problem. Then you just fix the height of your footer and use a negative margin to ride it up over your content... padding the bottom of your two columns to make certain the footer doesn't wrap over the column content. Making the appearance of the columns requires a trick that only works if you know how wide the columns are, becuase margin and background positioning don't use the same meaning of % as width. Pretty much you put your sidebar background on the body tag, then use an image as your content area background positioned on #container tiled on the y axis. In this case I made a 3072px by 1px image for that, pushing it in 20em from the left edge. This approach would not be desirable if you decided to fix the width of #container, in which case I would force #sideBar to a pixel width, and make the entire image be both columns. You'll notice I put padding or margins on the sub-elements instead of trying to do it anyplace where a width is declared. I do this so that box model headaches in IE 5.x don't arise, as I still have clients that care about it - from Mac users for whom that's still their only real choice in a browser to people stuck on older versions of Windows CE on handhelds. It's not THAT hard to backwards support those browsers if you just keep in mind that declaring padding or borders the same time as width and/or height is usually a bad idea. Hope this helps.