I would like to create a simple GUI with floating icon elements with JQuery with HTML5 support. I'm having problems in positioning the icon in the tiled divs elements. I need CSS codes in metro style create floating icon. I just upgraded to Windows 8 OS so I'm still figuring this out. Thanks.
Need help in metro style create floating icon
Â
Hi there Cooper Rmyles,
Â
A small peek into your already done code would be of a huge help to give you the exact css lines you should use.
Â
However, the trick is in the positions. Your divs should be relatively positioned, while icons should be positioned absolutely. This will make a div a containing block and the icon will be floating inside of its parent div.
Â
The code should look something like this:
Â
.block > div {
  float: left;
  position: relative;
}
Â
.block > div .icon {
  position: absolute;
  bottom: 0;
  left: 0
}
