tags:

views:

411

answers:

5

Hi, could somebody help me with freaking complicated tile layout as it specified under the 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: pastie.org/593815

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

+2  A: 

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);}
wookiehangover
Won't work as expected. Please see my code here: http://pastie.org/593815
Sam
+2  A: 

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>
Randell
Thanks, but there are not just 2 columns. If the dashboard has free width space for 3rd, 4th, etc... then it should be there.
Sam
Hmmm.. I didn't know about those conditions. Maybe you can update your question to include those conditions?
Randell
What are the other conditions? Are the #1 and #2 divs fixed? And there cound be one to infinite number of widgets?
Randell
There cound be one to infinite number of widgets with different size.
Sam
And where do you want these widget to go based on different conditions?
Randell
Additional mockup http://img191.imageshack.us/img191/2139/picture2fdi.png
Sam
My first impression is that it won't give a good user experience.
Randell
I don't think so, these widgets are just informers. Like an OSX dashboard widgets but automatically positioned to fill free space
Sam
A: 

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

wenbert
A: 

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;}
Jason
Doing the same. That is not exactly what I want. I edited my question again. See my reply to phoenix for my failing markup.
Sam
ha, well, with that additional picture you posted, that's a little different than your original question. also, good luck trying to implement that layout.
Jason
A: 

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.

Eric Meyer