I haven't really used CSS's Display attribute much because mostly tables have been sufficient however after deciding to practice HTML again by trying to recreate the Xbox dashboard. Because the dashboard has certain cells that are a few cells big I do not think this is a good application for tables, because div tags are being used more and more I feel I should practice with them.
This however leaves me with how to align the cells on the side of others such as two on the left and one big one by the side of them both, how can I do this? I have tried the display attribute of inline-block along with combinations of loads of others with different cells to no success. so far my code is only:
<div style="width: 50px; height: 50px; background-color:red;"></div>
<div style="width: 50px; height: 50px; background-color:green;"></div>
<div style="width: 100px; height: 100px; background-color:blue;"></div>
Use the CSS float: property to arrange the divs. In this case it takes a bit of thinking spatially but it's not too difficult.
For example http://jsfiddle.net/2K9TG/ in this example the divs with black borders have no float set and the divs with red borders have float set to
float:left;
So by floating an object, all of those objects with float set to float:left or float:right, will be formatted next to each other (inline) rather than underneath each other. With something like the XBox dashboard, it gets a lot more complicated, you have to put divs inside of divs and float some of those divs and others not. I made a jsFiddle example http://jsfiddle.net/xPAGd/ for you to check out. All divs have a red border so you can see what they do. Hope this helped you out
Also here's a great tutorial on floating by w3schools, they explain it much better than I can. http://w3schools.com/css/css_float.asp