Make div 100% height of browser window I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now the background-color ends at the last piece of content in that div. I've tried height:100%, min-height:100%; etc. Best Answer: There are a couple of relatively new CSS3 measurement units called: Viewport-Percentage (or Viewport-Relative) Lengths What are Viewport-Percentage Lengths? From the linked W3 Candidate Recommendation above:          

How to make div not larger than its contents? I have a layout similar to: <div> <table> </table> </div> I would like for the div to only expand to as wide as my table becomes. Best Answer: The solution is to set your div to display: inline-block. http://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents?answertab=votes#tab-top

How do CSS triangles work? There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> How and why does it work? Answer: CSS Triangles: A Tragedy in Five Acts As alex said, borders of equal width butt up against each other at 45 degree angles: When you have no top border, it looks like

Vertically align text next to an image? Why won't vertical-align: middle work? And yet, vertical-align: top does work. <div> <img style="width:30px;height:30px"> <span style="vertical-align:middle">Doesn't work.</span> </div> Solution: Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text. <!-- moved "vertical-align:middle" style from span to img --> <div> <img style="vertical-align:middle" src="https://placehold.it/60x60"> <span style="">Works.</span> </div> Tested in FF3. http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image

Need an unordered list without any bullets I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them. Is it possible to have a list without bullets? Solution : You can remove bullets by setting the list-style-type to none on the CSS for the <ul> element, for example: ul { list-style-type: none; } You might also want to add padding: 0 and margin: 0 to that, if you want to remove indentation as well. See Listutorial for a great walkthrough of list formatting techniques.

When to use margin vs padding in CSS When writing CSS, is there a particular rule or guideline that should be used in deciding when to use margin and when to use padding? Solution : TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box. To me the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't. Consider two elements one above the other each with padding of 1em.

How to disable text selection highlighting using CSS? For anchors that act like buttons (for example, Questions, Tags, Users, etc. at the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text? I realize this could be done with JavaScript, and a little googling yielded the Mozilla-only -moz-user-select option. Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach? Answer: According to Can I use,