CSS: make divs auto adjust automatically to different heights on the container div

Basically you put a clear:both at the bottom of the floated elements, to pull the height of the container div down: <html> <head> <style type=”text/css” media=”screen”> #container { background-color:#CCCC99; width:50%; } </style> </head> <body> <div id=”container”> <div id=”left” style=”float:left;background-color:#CCCCCC; width: 40px;”>Too much content it goes off the background of the container div, how do I […]

Browsers: IE problems and browser compatibility issues with IE

IE 6 floating elements that touch each other with a div border, the border of the container get double margin. If you specify 10 for each, you will get 20). The solution: zoom:1 or display:inline – floated elements will behave as blocks, even if you specify display:inline, but nonetheless it will at least fix this […]

CSS layouts, using CSS to layout elements on pages

Types of layouts: fixed width: The page size is fixed, no matter what monitor size it is displayed in. The larger the monitor, the more space wasted. In small monitors, users will have to scroll to see all the content Easy to layout and deal with The majority of websites are fixed width 960 px […]

HTML Form elements and its CSS formatting

<fieldset> Encapsules a set of form fields, that can be styled as a group. Not all browsers behave the same with it. <legend> Provides a label for the fieldset tag, it must follow right after the fieldset tag <input type=”text” /> It is the safest cross browser element in forms that style the same across […]

Making IE6+ browser render as other browser engines

In quirks mode, it acts like IE 5. Implements most of CSS 2.1 goodness. To turn off compatibility mode and revert it back to IE 7 behavior, put the following tag in the head: <meta http-equiv=”X-UA-Compatible” content=”IE=edge” /> Now, if you want a really good HTML5 ready engine to run on your old IE browsers, […]