1

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>
Lee Fogg
  • 775
  • 6
  • 22

2 Answers2

2

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

samrap
  • 5,595
  • 5
  • 31
  • 56
  • Thanks, I think understand floating now, I wish I could post the code but unfortunately I don't have a jsfiddle account. – Lee Fogg Jul 22 '13 at 17:32
  • @LeeAllan you actually don't need an account to do it, just paste the code in and press save and it will generate a url. Glad I could help! – samrap Jul 22 '13 at 22:15
0

Building in from Sam R.'s answer, you could use a CSS Grid layout to make it easier to replicate the Xbox Dashboard "Tile" design in CSS.

I've taken the liberty to knock-up an example for you (with the pop-out hover effect, like the Xbox Dashboard), with pure CSS. However you could change this effect with jQuery or CSS3 transitions.

Community
  • 1
  • 1
Enijar
  • 6,387
  • 9
  • 44
  • 73
  • I am currently working on the hover effect but I don't see how your code helps, your example just adds a 5px thick border - the tile has to actually change its size as it would finally contain an image. – Lee Fogg Jul 23 '13 at 14:47
  • If you actually look into my example you will see that the size is 10px less and the 10px border keeps it centred so that when you hover your mouse over the tile it will grow by 10px and pop-out centred. You may have no need for this at the moment, but if you want the tile to pop-out when you hover over it then this code will achieve that for you. – Enijar Jul 23 '13 at 15:13
  • you could even add the CSS3 box-shadow effect, but yes this is a great recreation of the dashboard – samrap Jul 23 '13 at 21:46