css columns like newspaper and div with media

Question

I am trying to find a solution to be able to code something like the attached image via css, js or php.

I want to have three columns for my articles. And on top of the 2 last columns one extra div for the media of the article.

Links with tutorials or css position tricks for this are priceless!

Thanks in advance...

image link: http://my.greview.gr/css_newspaper.png

---

Its ok for this solution the part of columnization, and in this case i dont care for browser-cross, but the problem here is how I can configure the position of media div, on top of 2 last columns, and prevent the text overlap of main article!

Answer 1

If you are using modern browsers, you could use the column bits from css3

div#multicolumn1 {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

Read more here: http://www.quirksmode.org/css/multicolumn.html

---

One way to make it work with the picture over two columns is to do the following:

1. set a wrapper div, give it a position:relative

2. set your multicolumn div, give it a fixed width

3. add two spacer spans, one for each column you want to have the image span over. Set them to display: block. NB you will need to fiddle with their position in the content to make the appropriate space at the top.

4. use position:absolute to set the image in its spot.

Normally you would use column-span and pick a number... but that's not supported in any browser that I know of. (They only support all or none).

CSS

div#wrapper{
    width:500px;
    border:1px solid red;
    padding:1em;
    position:relative;
}

div#multicolumn1 {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -moz-column-width:100px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -webkit-column-width:100px;
    column-count: 3;
    column-gap: 20px;
    column-width:100px;
}

div#img{
    height:70px;
    width:350px;
    border:1px solid green;
    position:absolute;
    right:10px;
}

span.bg1{
    width:100%;
    height:100px;
    display:block;
}

Example: http://jsfiddle.net/jasongennaro/HgmKg/2/