Is there a way to specify different widths for columns in CSS3?

css css-multicolumn-layout
Joe Morris picture Joe Morris · Mar 16, 2010 · Viewed 19.4k times · Source

I would like to use CSS to present a two-column layout. The markup I am using is this

<div style="-webkit-column-count: 2;
            -webkit-column-rule: 1px solid black;
            -webkit-column-width: 80px;
             margin-left:20px;margin-top:20px;">
    <div id="picturebox" style="">picture box</div>
    <div id="nme">name</div>
</div>

Is there a way to give one column a width of 20px and one column a width of, say, 80px?

Answer

Quentin picture Quentin · Mar 16, 2010

No, there isn't a way.

The feature is designed for content that flows between equal columns.

Related questions

How to display an unordered list in two columns?

With the following HTML, what is the easiest method to display the list as two columns? <ul> <li>A</li> <li>B</li> <li>C</li> &…

Read More
How to prevent column break within an element?

Consider the following HTML: <div class='x'> <ul> <li>Number one</li> <li>Number two</li> <li>Number three</li> <li>Number …

Read More
CSS multi-column layout of list items doesn't align properly in Chrome

I am building a menu system presented to the user in multi-column format. The column-count property in CSS3 gets me 90% of the way there, but I'm having difficulties with alignment under Chrome. The menu is relatively simple: an unordered list …

Read More