Archive for February, 2012
Vertical align block element inside block element
The popular question, “How to align vertically block inside block?”. Here’s an example of how to position a div in the middle of another div. The same way you can position vertically a block on the top or at the bottom. The main idea is that you have a container div with the same height and line-height values, for example, 100px. Another div that is inside the container specifies its position (top, middle of bottom) using vertical-align property.
HTML:
<div id="a"> <div id="b"></div> </div>? |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#a { display: block; width: 100px; height: 100px; line-height: 100px; float: left; border: 1px solid red; text-align: center; } #b { display: inline-block; background: gray; width: 50px; height: 50px; vertical-align: middle; } ? |
By the way, you can use this approach to align text within a div vertically.
The limitations of this approach is that you should specify fixed height and line-height values and cannot align vertically inside fluid height container. But there’re some other approaches to align vertically in fluid height containers, I’ll try to write about this in next articles.
Notice!! I’ve just checked this on XHTML DOCTYPE and it doesn’t work! In my case, it only works on HTML5.
Try it http://jsfiddle.net/F7X4u/.
Stick Footer to bottom with CSS
In this article I will show you a method of how to make sticky Footer with help of CSS. Following this sample your’ll find out a nonstandard enough way of how to stick footer to bottom.
The footer element is positioned immediately after the content element if the content element has height bigger then the window height, otherwise the footer element is positioned at the bottom of the browser’s window.
If you will decide to use this approach, check it in all the browsers your site should be compatible with. Note that min-height of 100% works only in good browsers 
HTML:
1 2 3 4 5 6 7 |
<div id="content"> <p>Some text</p> <p>Some text</p> <p>etc...</p> </div> <div id="footer">Footer</div>? |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
html, body { position: relative; height: 100%; } #footer { width: 100%; height: 100px; margin-top: -100px; box-sizing: border-box; padding: 10px; border-top: 3px solid gray; background-color: lightyellow; text-align: center; } #content { position: relative; box-sizing: border-box; min-height: 100%; padding-bottom: 100px; border: 1px dotted red; } ? |
Try this example at http://jsfiddle.net/yGLyN/.