CODEWITHSUNDEEP
csswebmultiple-columns
user2227713
user2227713

Reputation: 411

CSS3 Columns background cutoff

I am trying to use CSS3 columns to order some divs top to bottom then left to right. It seems to work pretty well but I have this one issue as shown in the image below. I give each of the divs a background and when I adjust the height of my window, instead of moving the entire background in one block as I would like, it progressively adds it, separating the background between two columns. This looks REALLY bad. I was wondering if there was a way to preserve the background of my divs so that as soon as the window becomes too small to accommodate even one pixel-height of a div, it moves the entire div to the next column.

Secondly, I would like to center the column(s) on the page with regard to the window size. I want this to work in Chrome (any recent version), Firefox (Any recent version), and IE 10.

You can fiddle here: http://jsfiddle.net/eE3z6/

#mainContent /* The containing div */
{
    position: absolute;
    top: 50px;
    bottom: 50px;   
    margin: 10px;   
    column-width: 400px;
    -webkit-column-width: 400px;
    -moz-column-width: 400px;
}

.blockData /* The divs inside are all of this class */
{
    position: relative;
    width: 380px;
    height: 30px;
    padding: 4px;
    margin: 0px 0px 10px 0;
    border: 4px outset grey;
    background: lightgrey;
}

enter image description here

Upvotes: 1

Views: 1725

Answers (2)

Sasidhar Vanga
Sasidhar Vanga

Reputation: 3404

Just add -webkit-column-break-inside : avoid; and display : inline-block for .blockData

Demo at : http://jsfiddle.net/eE3z6/4/

Upvotes: 2

Matto
Matto

Reputation: 236

I thought I answered this yesterday. You need to take the float:left off of the .blackData and .listData styles and add a padding-bottom to your .listData style. 20px seems to work. The columns is checking the content (not the background) when deciding what to send to the next column and by adding padding to the bottom of the .listData you are making the content the same size as the background.

Also, on your jsfiddle you have .blockData style in there 2 times, so you need to take one of them out.

If you want to make it so that the columns will center on the main content div you will need to take off the position:absolute style from #mainContent and change .blockData margin from 5px 0px to 5px auto. By adding the auto to margin you will automatically center the content. I would also suggest taking the margin off the top of .blockData and only putting it on the bottom, so that all the columns will align to the top.

Now, when you take off the absolute positioning from #mainContent you will be able to center the blocks, but it will not readjust and send one block to the next column, but will even out the number of blocks in each column (i.e. instead of having 7 in the first and 1 in the second it will have 4 in the first and 4 in the second). It really depends on how you want it to be displayed.

I also, fixed up your jsfiddle. just turn position: absolute off and on for #mainContent and you'll see what I'm talking about.

EDIT:

instead of using-padding bottom to keep from cutting off each background you can use display: inline-block on the .blockData (this is similar to column-break-inside: avoid in this case but works on all browsers).

Upvotes: -1

Related Questions