Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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!

like image 365
kokazani Avatar asked Oct 08 '11 02:10

kokazani


People also ask

How do I create a newspaper column in HTML?

Put your text into the first column (this allows non js browsers to still display your content). Get the text with js (eg. from onload event). Find the next index of "." (or if you have paragraphs "< /p>") starting from the middle.

Which layout allows to set multiple columns of text like in newspapers in CSS?

The basic idea of multicol, is that you can take a chunk of content and flow it into multiple columns, as in a newspaper. You do this by using one of two properties. The column-count property specifies the number of columns that you would like the content to break into.

How do you display items in a column in CSS?

Create a list with as many list elements as you want. Then enclose the list in a div, setting style=column-width and style=column-gap, to match the information in your list elements. Do not set style=columns.


1 Answers

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/

like image 179
Jason Gennaro Avatar answered Sep 30 '22 12:09

Jason Gennaro