Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts

    even out content in column-break

    I have two questions. First, is there a way to make content spread evenly through a column-count? I've noticed that Chrome renders things a little different, so things aren't lining up. If it's just content, this isn't a huge issue. But if I've got a list, it looks worse when unequal amounts of content are in each column.

    also, I have an @media bit for responsive design, but maybe there's a better, simpler way to do this, so I don't need that part?

    Edit: I also just noticed the bullets aren't appearing in Chrome?

    Code:
    <style>
    .columnizer3 {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    width:90%; 
    margin:0px 50px 0px -10px;
    display:block;
    }
    
    .columnizer3 li {
    padding: 0px 40px 0px 0px;
    }
    
    @media screen and (max-width: 500px){
     .columnizer3 {
    	-moz-column-count:1 !important; /* Firefox */
    	-webkit-column-count:1 !important; /* Safari and Chrome */
    	column-count:1 !important;
    	width:91%;
    	padding:10px 5px 10px 30px !important;
    	margin: 0px 10px 10px 0px !important;
    }
    .columnizer3 li {
    padding: 0px 0px 0px 0px;
    }
    
    }
    </style>
    
    <ul class="columnizer2">
    	<li>Personal Banking</li>
    	<li>Business Banking</li>
    	<li>Mobile and Online Banking</li>
    	<li>Credit Cards/Debit Cards</li>
    	<li>Home Loans</li>
    	<li>Home Equity Lines of Credit</li>
    	<li>Investments</li>
    	<li>Insurance</li>
    	<li>more</li>
    	<li>another link</li>
    </ul>
    Last edited by turpentyne; 03-05-2014 at 06:04 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts
    I have to add, before anybody makes the suggestion:

    I already Unsuccessfuly tried adding :

    -moz-column-fill: balance;
    -webkit-column-fill: balance;
    column-fill: balance;

    It did not work.

  • #3
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Please show me how it's meant to look in more detail please.

    Thanks.

  • #4
    Regular Coder
    Join Date
    Aug 2012
    Posts
    122
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Hi Turpentyne,

    In regards to the bullet points missing in chrome, add this to your CSS:
    Code:
    ul {
      list-style-position: inside; /*Add this CSS to have your bullet points show up again */
    }
    In relation to making things appear 'even', what do you mean by even? Do you mean that when the window is small all the <li> are straight above one another and and as you increase the size the words in one <li>will move to another line one at a time?
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello turpentine,
    With an odd number of li items and their unpredictable width/linebreaks it's hard to tell exactly how it could be evened out.
    With a set width it can look like this -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 840px;
    	margin: 0 auto;
    	overflow: auto;
    	background: #999;
    }
    .columnizer2 {
    	width: 700px;
    	margin: 50px;
    	display: block;
    	background: #e5e2e2;
    	-moz-column-count: 3; /* Firefox */
    	-webkit-column-count: 3; /* Safari and Chrome */
    	column-count: 3;
    }
    .columnizer2 li { padding: 0px 40px 0px 0px; }
    </style>
    </head>
    <body>
    	<div id="container">
    		<ul class="columnizer2">
    			<li>Personal Banking</li>
    			<li>Business Banking</li>
    			<li>Mobile and Online Banking</li>
    			<li>Credit Cards/Debit Cards</li>
    			<li>Home Loans</li>
    			<li>Home Equity Lines of Credit</li>
    			<li>Investments</li>
    			<li>Insurance</li>
    			<li>more</li>
    			<li>another link</li>
    		</ul>
    	<!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •