CODEWITHSUNDEEP
css
Jonah
Jonah

Reputation: 16222

Imitate A 2 Column Magazine Page

This is not about a simple 2 column page layout. Rather it's about how to create a bordered css box that would behave as if it were a 2 column magazine page, with content beginning by filling up the first column, and then only moving onto the second column when it ran out of space in the first column (either because more text was added, or because font-size increased).

A couple pictures of how the 2 column layout in MS Word works may help to clarify the issue. Keep in mind the key point is that we do not know beforehand which content belongs in the first column and which in the second (that's an easy problem):

Content begins in column 1:

enter image description here

Content spills into column 2 when font-size is increased:

enter image description here

Is it possible to do this in css?

Upvotes: 1

Views: 275

Answers (1)

thirtydot
thirtydot

Reputation: 228192

CSS3 has the answer: http://www.w3.org/TR/css3-multicol/

See: http://jsfiddle.net/thirtydot/bjfVe/

#container {
    -moz-column-count: 2;
    -moz-column-gap: 1em;
    -moz-column-rule: 1px solid #666;

    -webkit-column-count: 2;
    -webkit-column-gap: 1em;
    -webkit-column-rule: 1px solid #666;

    column-count: 2;
    column-gap: 1em;
    column-rule: 1px solid #666;
}

The browser support is.. very predictable: http://caniuse.com/multicolumn

Upvotes: 5

Related Questions