Multiple Vertical 100% Height & Width Divs

Question

I'm trying to create multiple divs with 100% both width & height, but keep failing miserably. Example:

Solution 1:

The solution is first reset default values for margin and padding:

* {
  margin:0;
  padding:0;
}

Second make your html and body be the 100%:

html, body {
   height:100%;
}

Then your dimension for divs:

#wrapper, #one, #two {
   width:100%;
   height:100%;
}

_{You can't assign numeric values for id or class on the first charachter}

The demo http://jsfiddle.net/3fCZg/

Solution 2:

From what I understand of HTML and CSS if you create 2 divs that have a width and height of 100% and place them in the same containing div, you will only see 1 of the divs because they are both the exact same height and width and are placed on top of each other.

EDIT: Sorry I was thinking of inline elements and z-index (here is the code to get what you want done, if I am reading your post correctly

<html><head><title>Test</title><style>#wrapper {
            width: 498px;
            height: 498px;
            border: 2px solid #000000;
        }

        #box1 {
            width: 100%;
            height: 100%;
            background-color: rgba(255, 0, 0, 0.5);
        }
        #box2 {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 255, 0.5);
        }
    </style></head><body><divid="wrapper"><divid="box1"></div><divid="box2"></div></div></body>

I hope that works!

EDIT: You can change the container div to be whatever height you want it to be to further customize this :D, now you can use your intuition to create what you were hoping to create!

Html5 Cafe

Multiple Vertical 100% Height & Width Divs

Solution 1:

Solution 2:

Post a Comment for "Multiple Vertical 100% Height & Width Divs"