CODEWITHSUNDEEP
jqueryhtmlcsslayoutcss-float
Sam
Sam

Reputation: 428

Complicated CSS layout

Could somebody help me with freaking complicated tile layout as is specified under this link?

I have tried to use float:left for widgets but I getting the red block always below #2. I should be able to dynamically add widgets to black dashboard. I can use html5, css3 and jquery.

There are not just 2 columns. If the dashboard has free width space for 3rd, 4th, etc... then it should be there. There cound be one to infinite number of widgets with different size. If there is no free width space then new widgets should float down to left and totally fill free space.

Failing markup:

<!DOCTYPE html>
<html>
  <head>
    <title>Dashboard</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Robots" content="noindex, nofollow"/>
    <style type="text/css">
      #dashboard {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        background: #000;
        width: 320px;
        float: left;
      }
      div.widget {
        margin: 10px;
        border: 1px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        padding: 5px 10px 10px 10px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="dashboard">
      <div class="widget" style="background: #fff; width: 120px; height: 150px">
        <h3>#1</h3>
      </div>
      <div class="widget" style="background: #fff; width: 120px; height: 250px">
        <h3>#2</h3>
      </div>
      <div class="widget" style="background: red; width: 90px; height: 50px">
        <h3>#3</h3>
      </div>
      <div class="widget" style="background: green; width: 90px; height: 50px">
        <h3>#4</h3>
      </div>
      <div class="widget" style="background: blue; width: 90px; height: 50px">
        <h3>#5</h3>
      </div>
    </div>
  </body>
</body>

Additional mockup: img191.imageshack.us/img191/2139/picture2fdi.png

Upvotes: 0

Views: 1431

Answers (6)

stevenmc
stevenmc

Reputation: 1669

I know this is probably too late. But I recently found this JQuery plugin that seems to solve the problem in a very elegant way.

isotope.metafizzy.co

I hope this helps.

Upvotes: 2

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

There is no CSS solution for what you want. I think I have seen JS solutions floating around, but I can't put my finger on any at the moment.

Upvotes: 0

Jason
Jason

Reputation: 52533

Have you tried just including a wrapper div, classing it as something like "widget" and floating it left? I'm not sure I understand what the colored boxes are underneath #1 and #2 are, but if they are related to the items directly above them, I don't see how this is difficult:

<div class="widget">
    <div id="widget1">stuff</div>
    <div id="widget1_1">stuff related to 1</div>
</div>

<div class="widget">
    <div id="widget2">stuff</div>
    <div id="widget2_1">stuff related to 2</div>
</div>

CSS:

.widget {float: left; overflow: auto;}
.widget div {float: left;}

Upvotes: 0

wenbert
wenbert

Reputation: 5303

What about using BlueprintCSS? http://www.blueprintcss.org/

Upvotes: 0

Randell
Randell

Reputation: 6170

The CSS:

body {
  background: #000;
}
.left {
    float: left;
}
.right {
    float: left;
}
.widget {
    margin: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 200px;
}
.content {
    margin: 10px;
    background: #fff;
    width: 300px;
}
#one {
    height: 300px;
}
#two {
    height: 400px;
}
#red {
    background: #f00;
    height: 100px;
}
#green {
    background: #0f0;
    height: 100px;
}
#blue {
    background: #00f;
    height: 100px;
}

The HTML:

<div class="left">
    <div class="content" id="one"></div>
    <div class="widget" id="red"></div>
    <div class="widget" id="green"></div>
</div>

<div class="right">
    <div class="content" id="two"></div>
    <div class="widget" id="blue"></div>
</div>

Upvotes: 2

wookiehangover
wookiehangover

Reputation: 430

make 2 container divs, both float:left

then just float:left everything inside those divs.

easiest way to do a two column layout with css.

<div id="leftcol">
your code...
</div>
<div id="rightcol">
your code...
</div>

css:

leftcol,rightcol{float:left;width:(whatever);}

Upvotes: 2

Related Questions