CSS and JS techniques for designing Metro style website

Question

I'm building a website using this code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #dcf0f9;
            direction : rtl;
        }

        .clearfix:before, .clearfix:after {
            content: "";
            display: table;

        }

        .clearfix:after {
            clear: both;
        }

        .tile_1_1 {
            width: 120px;
            height: 120px;
        }

        .tile_2_1 {
            width: 248px;
            height: 120px;
        }

        .tile_2_2 {
            width: 248px;
            height: 248px;
        }

        .tile_1_2 {
            width: 120px;
            height: 248px;
        }

        .tile_4_3 {
            width: 504px;
            height: 376px;
        }

        .tile {
            float: right;
            margin: 4px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        }

        .bottom {
            margin-bottom: 0;
        }

        .bottom_left {
            margin: 4px 4px 0 0;
        }

        .bottom_right {
            margin: 4px 0 0 4px;
        }

        .bottom_left_right {
            margin: 4px 0 0 0;
        }

        .top {
            margin-top: 0;
        }

        .top_left {
            margin: 0 4px 4px 0;
        }

        .top_right {
            margin: 0 0 4px 4px;
        }

        .top_left_right {
            margin: 0 0 4px 0;
        }

        .left {
            margin-left: 0;
        }

        .right {
            margin-right: 0;
        }

        .left_right {
            margin: 4px 0 4px 0;
        }

        .column_4 {
            width: 504px;
            float: right;
        }

        .column_2 {
            width: 248px;
            float: right;
        }

        .column_left {
            margin: 0 4px 0 0;
        }

        .column_midde {
            margin: 0 4px 0 4px;
        }

        .column_right {
            margin: 0 0 0 4px;
        }

        .backToOrigin {
            margin-top: -120px;
        }

        #container {
            margin-top: 150px;
            width: 3000px;
        }

        #sectionA {
            float: right;
            width: 1016px;
        }

        #sectionB {
            float: right;
            width: 504px;
            margin-right: 112px;
        }

        #slideShow {
            background-color: #aaa;
        }

        .typeB {
            background-color: #21b044;
        }

        .typeA {
            background-color: #1f65c5;
        }

        .typeC {
            background-color: #21b1e5;
        }

        .redBox {
            background-color: #fd3f1b;
        }

        .yellowBox {
            background-color: #fdbe21;
        }

        .greyBox {
            background-color: #5a5a5a;
        }

        .greenBox {
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="container" class="clearfix">
        <section id="sectionA">
            <div class="column_4 column_right">
                <div id="slideShow" class="tile_4_3 tile top_left_right"></div>
                <div class="tile_2_1 tile tile bottom_right typeA"></div>
                <div class="tile_1_1 tile bottom typeB"></div>
                <div class="tile_1_1 tile bottom_left typeA"></div>
            </div>
            <div class="column_2 column_midde">
                <div class="tile_2_1 tile top_left_right typeB"></div>
                <div class="tile_1_1 tile right typeA"></div>
                <div class="tile_1_1 tile left yellowBox"></div>
                <div class="tile_1_1 tile right typeB"></div>
                <div class="tile_1_2 tile bottom_left typeA"></div>
                <div class="tile_1_1 tile bottom_right redBox backToOrigin"></div>
            </div>
            <div class="column_2 column_left">
                <div class="tile_1_1 tile top_right typeA"></div>
                <div class="tile_1_1 tile top_left typeC"></div>
                <div class="tile_2_1 tile left_right greyBox"></div>
                <div class="tile_2_2 tile bottom_left_right typeC"></div>
            </div>
        </section>
        <section id="sectionB">
            <div class="column_2 column_right">
                <div class="tile_2_1 tile top_right typeA"></div>
                <div class="tile_1_1 tile right typeC"></div>
                <div class="tile_1_1 tile left typeA"></div>
                <div class="tile_2_2 tile bottom_left_right greenBox"></div>
            </div>
            <div class="column_2 column_left">
                <div class="tile_1_1 tile top_right greenBox"></div>
                <div class="tile_1_1 tile top_left yellowBox"></div>
                <div class="tile_2_1 tile left_right typeC"></div>
                <div class="tile_1_2 tile bottom_right typeA"></div>
                <div class="tile_1_1 tile left typeB"></div>
                <div class="tile_1_1 tile bottom_left greyBox"></div>
            </div>
        </section>
    </div>
</body>

I used float for placing tiles in the page

I know this is not the best approach for this kind of design

I want these tiles be dynamic in the future, I mean I will add JS for dragging and delete and moving these tiles and push each other to fit in the place, another thing is I wanna design this page responsive, I mean with resizing window these tiles move and change their position and resize

I checked gridster plugin but need to do it from scratch for more functionality

and this is my Question :

Is there better solution for CSS instead of using float and without positioning?(absolute, relative and ...)

(without conflict with future JS and upper statements)

It's important for me to support IE8

thanks for your help, also this is my first STACKOVERFLOW question ;)

Answer 1

I've created something similar and I only used float <div> s to make these blocks. See my example . It works across browsers and I hope this can help you.

EDIT: The example is updated to show the layout when different sizes of blocks were used. Still, the example uses only 1 <div> tag as the target.

Answer 2

You might want to check out something like fluidsquares because I think that is the effect you are trying to go for?

Here is a blog post about it.

CSS and JS techniques for designing Metro style website

Question

2 answers

solution1
1 ACCPTED 2012-12-24 03:24:22

solution2
0 2012-12-24 03:47:24

CSS and JS techniques for designing Metro style website

Question

2 answers

solution1 1 ACCPTED 2012-12-24 03:24:22

solution2 0 2012-12-24 03:47:24

solution1
1 ACCPTED 2012-12-24 03:24:22

solution2
0 2012-12-24 03:47:24