I tried to create a fixed-height layout and created as many columns of a certain size, if necessary, to show some stream text. This works, but when I put it in a div, the div does not accept the size of the content (which means: the red color in the example goes over the entire width of the page, if the page can contain all the text, and if I get a horizontal scrollbar, it does not go through the initial line of sight). I tried several methods for shrink from this page http://haslayout.net/css-tuts/CSS-Shrink-Wrap . However, none of them worked.
Here is a sample code:
<body style=""> <div style="background: red; display: inline-block; -webkit-column-width: 300px; -moz-column-width: 300px; height: 100px;"> <p style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit commodo dolor, et dapibus sem ultrices in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ac elit aliquet felis vestibulum iaculis. Donec nec risus at justo luctus vestibulum. Proin mollis sapien et odio interdum tempus. Mauris consequat arcu vitae justo tempor quis mattis magna pulvinar. </p> </div> </body>
I tried this with chrome and firefox. In addition, shrink wrapping works if I don't leave the height and colunm-with and instead set only a fixed width.
yokto source share