Explanation: These CSS declarations (display, box-orient, box-direction and more) allow you to position elements on a page without using floats. Sadly, they are only partly supported in -webkit and -moz browsers at the time of this writing.
Current declarations include the following:
- box-align
- box-direction
- box-flex
- box-flex-group
- box-lines
- box-ordinal-group
- box-orient
- box-pack
Example CSS code:
Examine the web page itself for more examples. Just covering some of the basics below. It is a good idea to include a container division within a wrapper division if you want to experiment with these (Firefox behaves a bit differently than Safari if only one containing division is used).
#container {
display: -moz-box;
display: -webkit-box;
display:box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
}
Example page (view the source code): http://learning-html5.info/CSS3/CSS_FlexibleBoxModel.html (will work in Safari/ Chrome and Firefox browsers at the moment).
References:
Loading ...