…and when you can’t say how wide the containers creating the layout will be (that is, you can’t specify a width for a wrapper, which is going to need to expand with its containers)?
Tricky one…
HI,
If I understand correctly its pretty simple and you just use a negative margin on a floated layout to create dead space that the floats can fall into.
Here’s an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html, body {
margin:0;
padding:0
}
h1 {
position:fixed;
left:180px
}
#sidebar {
width:150px;
position:fixed;
top:0;
bottom:0;
overflow:auto;
background:#fcf;
box-shadow:5px 5px 5px #999;
}
.wrap {
float:left;
margin:100px -999em 0 180px;/* increase negative margin to account for all images however there are browser limits*/
display:inline;
}
.inner {
float:left;
width:600px;
height:400px;
margin:10px;
background:red
}
</style>
</head>
<body>
<h1>Horizontal slider test</h1>
<div id="sidebar">Side column</div>
<div class="wrap">
<div class="inner">test</div>
<div class="inner">test</div>
<div class="inner">test</div>
<div class="inner">test</div>
<div class="inner">test</div>
<div class="inner">test</div>
</div>
</body>
</html>
Oh yeah, it’s pretty clever.
I noticed a strange behaviour though, with long text and columnization:
-moz-column-count: auto;
-moz-column-width: 200px;
It seems the text overlapps, as if a last column was added that is outside the box… You know why?
Sorry Paul, here’s a clearer code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html, body {
margin:0;
padding:0
}
.wrap {
float:left;
margin: 0 -999em 0 0;/* increase negative margin to account for all images however there are browser limits*/
display:inline;
}
.inner {
float:left;
height:400px;
margin:10px;
background:red
-moz-column-count: auto;
-moz-column-width: 200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd </div>
<div class="inner">testtesttest testtesttesttestt esttesttesttesttesttesttest testtest testtest</div>
<div class="inner">testtesttes ttesttesttesttesttest testtesttesttesttesttest testtest testtest</div>
<div class="inner">testtest testtesttest testtesttesttestt esttesttesttesttest testtest testtest</div>
<div class="inner">testte sttesttesttesttesttesttesttestt esttesttesttesttest testtest testtest</div>
<div class="inner">test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd </div>
</div>
</body>
</html>
Hi,
The last column is just the text flowing into the new column as described by the “column” properties. If you just use your last div you will see that it has nothing to do with the negative margin approach I offered.
You should in fact not have multiple divs as the columns would be spread out if you just had the one div holding all that content. As it stands you have multiple column elements doing the job where one could do the job - although it should work but each div will render its own text into columns which will leave you with some short columns rather than text filling each column before moving to the next.
The column module does not allow for backgrounds to be placed on each column which is why in the last example with the most text the column flows into two columns but the background color will not follow. I’m not sure why they didn’t propagate the background to each column as it seems that’s the first thing everyone wants.
So in answer to your question there is nothing wrong (apart from the missing semi colon in the code but I guess that was just a typo here) and the last column you see is just the text flowing into a new column but the background is not propagated to the new column
Sorry Paul, I really didn’t mean there was a problem with your approach. On the contrary, I’m trying to understand what’s wrong with mine.
What I’d like, is for each div to expend with the columns (be wide enough to wrap the number of columns resulting from the text it contains) and push the div next to it so columns don’t overlap. Maybe the code below (with <h2> added) will be more clear:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html, body {
margin:0;
padding:0
}
.wrap {
float:left;
margin: 0 -999em 0 0;/* increase negative margin to account for all images however there are browser limits*/
display:inline;
}
.inner {
float:left;
height:400px;
margin:10px;
-moz-column-count: auto;
-moz-column-width: 200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"><h2>TITLE</h2>test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd END </div>
<div class="inner"><h2>TITLE</h2>testtesttest testtesttesttestt esttesttesttesttesttesttest testtest testtest</div>
<div class="inner"><h2>TITLE</h2>testtesttes ttesttesttesttesttest testtesttesttesttesttest testtest testtest</div>
<div class="inner"><h2>TITLE</h2>testtest testtesttest testtesttesttestt esttesttesttesttest testtest testtest</div>
<div class="inner"><h2>TITLE</h2>testte sttesttesttesttesttesttesttestt esttesttesttesttest testtest testtest</div>
<div class="inner"><h2>TITLE</h2>test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd ONE MORE END</div>
</div>
</body>
</html>
Hi,
You can’t have floated column elements because a column computes the available space and produces the columns needed. The column properties are meant to be used like this with just one container.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html, body {
margin:0;
padding:0
}
.wrap { }
.inner {
height:400px;
margin:10px;
-moz-column-count: auto;
-moz-column-width: 200px;
-webkit-column-count: auto;
-webkit-column-width: 200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<h2>TITLE</h2>
test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd END
<h2>TITLE</h2>
test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd
<h2>TITLE</h2>
test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akj kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjah askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd test sdfkh sdkfjh askdjh kjashd kajsdh akjsd kjahsd kjashdkaj shd ONE MORE END</div>
</div>
</body>
</html>
If you add overflow:hidden to your example you will see the columns without text overlapping but there is only one column each which shows you what is actually happening.
.inner {
float:left;
height:400px;
margin:10px;
-moz-column-count: auto;
-moz-column-width: 200px;
overflow:hidden;
}
You can’t have multiple column elements although I guess it would be useful where you want to start a new column at a title but the break-before code should do that when it is supported.
So there is no way to float boxes next to each other and have their contents display into columns?
I tried to add this code:
.inner h2 {
break-before: column;
break-inside: avoid-column;
break-after: avoid-column;
}
But without success (I guess it’s not supported). I have read the Multicolumn module specs a couple of times and can’t figure out a way to achieve that horizontal effect.
Is there maybe a way to align .inner next to each other without floats? I tried with with display:inline and display:inline-block, but both failed…
No I don’t think you can do what you are attempting as it doesn’t make sense in the column context as the space available has to be computed into columns and you can’t have multiple columns in the same row because that defeats the purpose (although I can see what you are trying to do).
Columns are already equivalent to display:inline-block or table-cells as mentioned in the specs and float doesn’t seem to be supported and really doesn’t make sense in that context either.
You can fill the columns easily if you just use the one wrapper as in my example but unfortunately the break-before rules don’t seem to be supported yet. You will just have to the titles in the position that they happen to be.
I tried many variations also but the behaviour was always the same.
Thanks a lot Paul