CODEWITHSUNDEEP
htmlcssmultiple-columns
thatandrey
thatandrey

Reputation: 287

Weird quirk when re sizing columns with css

I posted an earlier question about making having columns wrap in a way that utilizes the most space in the viewport, right here. Combining some of the answers, I came up with the following jfiddle. I will be having a variable number of columns (2-5) and a variable number of words in each column. If you resize the jfiddle window horizontally, you'll notice that the middle column uses a third of the viewport even though there are barely any words in there, essentially leaving empty white space. I wouldn't mind using jquery/js, but I'd like to have the columns more smartly resized.

The current CSS I have is

body {
    padding: 1em;
    display: table;

    width: 100%;
}
div {
    display: table-cell;
        -moz-column-width:7em;
    -webkit-column-width:7em;
    column-width:7em;
}
span {
    display: block;
    width: 5em;
}

The body is the container, and the divs represent the columns, and the spans are the words in each column. The only thing I want to avoid at all costs is having the columns go underneath each other.

Upvotes: 0

Views: 45

Answers (1)

Code Uniquely
Code Uniquely

Reputation: 6373

Your columns act the way they do because they are equal in size. You have a single style for div so all columns get the same styling rules applied and (in your fiddle) equally share the width getting 1/3 of the horizontal space each.

Only having 7 entries in Column B means that it doesn't reach the bottom so does not wrap into inside the div like the other columns with more contents, so cannot use the additional space.

It not really a case of "even though there are barely any words in there" its because "there are barely any words in there" - there is not enough content to wrap into the space based on the height of the table cells.

The height of the cell is determined by the contents of all three columns and how they wrap. So whichever column has the most words will wrap its contents until is takes up a amount of space vertically on the page. This is then the height for the entire table and all three columns. If either of the other two columns don't have enough content to wrap they will leave space.

If you double the number of words in columns A for example you can easily get a situation where there is "left space" in both column B and column C.

Upvotes: 1

Related Questions