Absolute positioning and floats

I have a rather unusual layout that I'm trying to make a reality. There is a div containing, for sake of argument, that needs to be fixed at 200px from the left and from the top of a wrapper.

I then have a collection of square images that would all be floated and would continue to the 开发者_C百科edge of the browser window, and wrap around the absolutely positioned div. I know that absolute positioning takes the div out of the doc flow, which means I can't think of a simple solution for this.

Has anyone worked out a way around this kind of problem? Potentially with javascript?

EDIT: Here's the rough layout: link

I'm guessing you want more flexibility, but just in case, if your design is reasonably fixed, you can just use 3 columns (container divs) and sort it all out per column.

If your html is fixed, you could use javascript but I don't know of any ready-made solutions.

I would probably use javascript to do some math and inject dummy images / elements behind the black box at the right positions (keeping the black box absolutely positioned). You could also do that server-side.

Edit: Judging from your image, I would personally use a table. However, it can be achieved with floats:

(image: http://i.stack.imgur.com/KAqxZ.png)

<style>
#cont {
  width: 100px;
}   
.small {
  float:left;
  height:25px;
  width:25px;
  background-color:#00F;
}   
.big {
  float:left;
  height:50px;
  width:50px;
  background-color:#F00;
}   
.long {
  float:left;
  height:50px;
  width:25px;
  background-color:#F0F;
}   
.long .small {
  background-color:#F0F;
}   
</style>

<div id="cont">
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="long">
    <div class="small"></div>
    <div class="small"></div>
  </div>
  <div class="big"></div>
  <div class="small"></div>
  <div class="small"></div>
</div>

Original text:

I would do something like this:

<div class="absolute-wrapper">
  <div><!-- whatever content you intended for the absolute div... --></div>
  <div class="float-left">...</div>
  <div class="float-left">...</div>
  ...
</div>

However, I feel inclined to recommend you search for another solution than an absolutely positioned element. They easily grow unmaintainable.

You could do this with a canvas element, but it has downsides. You will be depending on javascript, as you will need to do all positioning in javascript.

Not to be unhelpful, but I also think you should consider how important this exact design is, simply because I don't think there is any straightforward solution, since HTML as it is today isn't really built for these kinds of layout. The future is promising though, giving us things like multi-column and flexbox...

Using javascript/jQuery, it could be accomplished using the logic of the following pseudo code:

Create a function which preforms these steps....

Step 1: Remove any divs from the dom that have a class named fakeSquare. Something like

 $('.fakeSquare').remove();

Step 2: Calculate the number of red divs in one row. Store this number in squaresPreRow. Something like: var squaresPreRow = floor( window width / square width ).

Step 3: After the squaresPreRow + 1 red square div, add two empty divs. Like so...

$("div.redSquare")
    .index(squaresPreRow + 1)
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");

Step 4: Add another two square for the third row...

$("div.redSquare")
    .index((squaresPreRow * 2) + 1)
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");

Step 5: And again...

$("div.redSquare")
    .index((squaresPreRow * 3) + 1)
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");

Finally you want to call this function when the DOM is ready and whenever the window changed.

This may need some tweaking, but hopefully it can get you started.