css columns like newspaper and div with media

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 columniza开发者_C百科tion, 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!

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/

The classic answer to your question is CSS Columns. This has already been discussed in another answer. It gives you the ability to divide a block into columns.

In the other answer you have stated that it might not work for you as you want to position graphic elements and have the text flow around them.

This might be possible with CSS Columns -- I have to confess I haven't tried it, but it is possible to get text to flow around graphics normally, so I don't see why it shouldn't be possible with Columns, as it should work like any other block apart from the layout of the text inside it.

However, if this isn't good enough for you, then CSS does offer another solution called CSS Regions. This is a mechanism that allows you to specify that text can flow from on element into another. You can chain your blocks and position them any way you like. This gives you complete freedom to lay your page out however you like.

You can find out more about it here: http://msdn.microsoft.com/en-us/ie/hh272902#_CSSConnected

It's basically a completely free page layout system, and should be exactly what you're looking for.

That's the good news.

The bad news is that CSS Regions has virtually zero browser support at this moment. See CanIUse for full info on browser support. As you can see from the tables on that link, it is coming in a few browsers, but even once it is implemented it'll be some way off from having enough user support to make it worth using.

Which is a shame because it is exactly what you're looking for.