Css columns like newspaper and media div

Question

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

I want to have three columns for my articles. And on top of the last two columns, an additional div is added for the media article.

Links to tutorials or CSS code tricks are priceless for that!

Thanks in advance...

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

---

Part of the columns is good for this solution, and in this case I don’t care about the crossroads of the browser, but the problem is how can I adjust the position of the media div over the last two columns and prevent text overlap of the main article!

Answer 1

If you use modern browsers, you can use the column bit 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; } 

More details here: http://www.quirksmode.org/css/multicolumn.html

---

One way to make it work with an image on top of two columns is to do the following:

• set a wrapper div , give it position:relative

• set multicolumn div , give it fixed width

• add two spans spacers, one for each column that you want to have. Set them to display: block . NB you will need to bother with your position in the content to make the corresponding space at the top.

• use position:absolute to set the image in its place.

Normally you would use column-span and choose a number ... but this is 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/

Answer 2

The classic answer to your question is CSS columns. This was already mentioned in another answer. This gives you the ability to split the block into columns.

In another answer, you stated that it may not work for you, because you want to position graphic elements and have a flow of text around them.

This is possible using CSS columns - I have to admit that I have not tried it, but you can make the text normally bypass the graphics, so I don’t understand why this should not be possible with the help of Columns, since it should work like any other block layout text inside it.

However, if this is not enough for you, then CSS offers another solution called CSS Regions. This is a mechanism that allows you to specify that text can flow from an element to another. You can snap your blocks and place them the way you like. This gives you complete freedom to lay out your page as you like.

You can learn more about this: http://msdn.microsoft.com/en-us/ie/hh272902#_CSSConnected

Basically, this is a completely free page layout system, and it should be exactly what you are looking for.

It's a good news.

The bad news is that there is currently virtually no browser support in CSS regions. See CanIUse for full browser support information. As you can see from the tables at this link, it goes to several browsers, but even after its implementation, it will slightly lag behind sufficient user support to make it useful.

What a shame, because that is exactly what you are looking for.