Friday, December 20, 2013

How do I make my div 100% height?

You need to know what the 100% is of, so the parent div must have a height set. One problem that people often come up against is making the main page fill the screen if there's little content. You can do that like this :
body, html {
body {
#wrap {
* html #wrap {

Here, the #wrap div goes around your whole page - it's like a sub-body.

You need to use 'min-height' rather than 'height' for Firefox because otherwise it will set it to 100% of the viewport and no more. Internet Explorer, being well... crap, treats 'height' as it should be treating 'min-height' which it doesn't recognise. (You can target IE by preceding your code with ' * html ').

To make floated divs within this #wrap div 100% of the #wrap div... well that's more difficult. I think the best way is to use the 'faux columns' technique which basically means that you put the background in your body rather than your columns. If the body has columns and your floats don't then it looks like your floated content is in a column that stretches to the bottom of the page. I've used this technique in my layout demos.

The problem is often not that the columns aren't 100% height, but that they're not equal lengths. Columns usually don't start from the top of the page and end at the bottom - there's often a header and a footer or sometimes, more interesting designs don't have a recognisable columnar layout, but do require div boxes to be equal heights. This can be done with the aid of a couple of images and some css or with some javascript.

Friday, August 2, 2013


W3C Stands for the World Wide Web Consortium. W3C is working to make the Web accessible to all users (despite differences in culture, education, ability, resources, and physical limitations).
  • W3C Stands for the World Wide Web Consortium
  • W3C was created in October 1994
  • W3C was created by Tim Berners-Lee
  • W3C was created by the Inventor of the Web
  • W3C is organized as a Member Organization
  • W3C is working to Standardize the Web
  • W3C creates and maintains WWW Standards
  • W3C Standards are called W3C Recommendations
The World Wide Web (WWW), most often called the WEB, is began as a project at the European Organization for Nuclear Research (CERN), where Tim Berners-Lee developed a vision of the World Wide Web. The Web is a network of computers all over the world. The computers on the Web communicate using standard languages. The World Wide Web Consortium (W3C) makes the Web standards.

Tim Berners-Lee - the inventor of the World Wide Web - is now the Director of the World Wide Web Consortium (W3C). W3C was created in 1994 as a collaboration between the Massachusetts Institute of Technology (MIT) and the European Organization for Nuclear Research (CERN), with support from the U.S. Defense Advanced Research Project Agency (DARPA) and the European Commission.

 W3C Members
Some well known members are:
  • IBM
  • Microsoft
  • America Online
  • Apple
  • Adobe
  • Macromedia
  • Sun Microsystems
The Full List of Member Organizations includes a variety of software vendors, content providers, corporate users, telecommunications companies, academic institutions, research laboratories, standards bodies, and governments.

The most important work done by the W3C is the development of Web specifications (called "Recommendations") that describe communication protocols (like HTML and XML) and other building blocks of the Web.

Each W3C Recommendation is developed by a work group consisting of members and invited experts. The group obtains its input from companies and other organizations, and creates a Working Draft and finally a Proposed Recommendation. In general the Recommendation is submitted to the W3C membership and director, for a formal approval as a W3C Recommendation.

Friday, May 31, 2013

Media Queries for Standard Devices for Web Designing

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */

/* iPhone 4 ----------- */
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
Another Method:

Thursday, January 24, 2013

What is HTML5 DocType?

A DOCTYPE is a required preparatory statement and must consist of the following characters, in this order:
  • A string that is an ASCII case-insensitive match for the string "
  • One or more space characters.
  • A string that is an ASCII case-insensitive match for the string "html".
  • Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string (defined below).
  • Zero or more space characters.
  • A U+003E GREATER-THAN SIGN character (>).
Link : Click here

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>HTML5 Doctor | Element Index</title>
<link rel="stylesheet" href="style.css" />

<body id="home">