How to do CSS column layout with a "floating" object spanning multiple columns?

Question

I'd like to create a layout in CSS that looks something like this:

+----------------+ __5_____
|                | __6_____
|                | __7_____
|                | __8_____
+----------------+ __9_____
___1____ __3_____  __10____
___2____ __4_____

Basically, the text (in the above diagram, the lines labelled 1 through 10) are arranged in a three-column layout, with a block (image, or whatever) sitting in the top left, occupying two columns, displacing the text.

Importantly, I'd REALLY like to avoid manually specifying where the column breaks are, because the content is user-provided. I have been using the CSS columns family of properties (column-width, column-count, etc.) to get the column layout for the text, but I'm not having much success putting the big floating block where I want. Is there a way to do this that doesn't involve a pile of JS to compute the optimal column break locations, and generating the columns myself?

Edited to add: in case it's not clear, in this example there are 10 rows but in practice I need to be able to deal with an arbitrary number of rows and still get columns of roughly equal height.

Answer 1

You can try setting your image div width to 66% of the container, and add padding in both sides to align it with the white space between the columns:

.div-with-image {
    width: 66%; // 2/3 of the container
    padding: 0 20px; // assuming 20px gutters for the columns
}

UPDATE

As the current state of the CSS Multi-column Module, the only "natural" alternatives to make an image span through several columns is either through the column-span property or overflowing the image inside the column.

However, column-span doesn't support -yet- other values than none (default) and all, and the overflow won't displace the text in the next columns but would just cover it or will be clipped by the containing column (depending on the browser).

The cleanest solution that comes to my mind:

Absolute position your image to the top left corner and define its width to span 2 columns, set the top margin of the first paragraph to the height of your image and insert a break before a dummy element (just a placeholder, could be a span) identified with a class. Finally, as that dummy element will be in the first line of the second column, you can assign the same margin top as you did with the first paragraph of the first column.

#image-placeholder {
  width: 600px;
  height: 200px;
  background-color: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
}

#columnized {
  -moz-column-width: 300px;
  column-width: 300px;
  position: relative;
}

#columnized p:nth-child(2) { // the image is the first child
    margin-top: 200px;
}

.break { // your dummy element (I used a span)
    break-before: always;
    display: inline-block;
    margin-top: 214px; // I had to tweak the margin a little
}

Additional notes

I know that you made your snippet as simple and possible, but, just in case: remember to add p tags and make it responsive (best practices). You may want to set the height of the #columnized div to use the same break across different screen sizes.

Answer 2

You could just do a simple two column layout and split one in half where needed. JSFiddle

/* 2 column grid */
.gridWrapper {
    width: 80%;
    float: none;
    margin: 0 auto;

    margin-top: 50px;
    margin-bottom: 50px;
}

.column {
    float: left;
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

.column img {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    display: block;
    padding: 10px;
    box-sizing: border-box;
}

.column p {
    float: left;
    width: 100%;
    padding: 10px;
    margin: 0 0 5px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid gray;
}

.left, .right {
    border: 1px solid blue;
}

.split {
    float: left;
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid red;
}

<div class="gridWrapper">
  <div class="column left">
    <div class="image">
      <img src="http://c.shld.net/rpx/i/s/i/spin/image/spin_prod_709722401??hei=64&wid=64&qlt=50">
    </div>
    <div class="split">
      <p>1</p>
      <p>2</p>
    </div>
    <div class="split">
      <p>3</p>
      <p>4</p>
    </div>
  </div>
  <div class="column right">
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
  </div>
</div><!-- END gridWrapper -->