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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    109
    Thanks
    21
    Thanked 0 Times in 0 Posts

    Smile Column Padding Left Not Working

    Hello on my column I have put [class*="col-"] width padding-left 20px; it is not working.

    Code:
    /****** Reset ******/
    
    html, body {
    	margin: 0px;
    	padding: 0px;
    }
    
    .aside, #top-nav, #header, #menu, #column-left, #column-right, #content {
    	display: block;
    }
    
    /****** End Reset ******/
    
    *, *:after, *:before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    body {
    	background: #39393B;
    }
    
    .container {
    	width: 90%;
    	margin: 0px auto;
    }
    
    #row {
    	background: #FFFFFF;
    	padding: 15px;
    }
    
    #row:after {
    	content: "";
    	display: table;
    	clear: both;
    }
    
    [class*="col-"] {
    	height: 50px;
        background: #DA8817;
        float: left;
        padding-left: 20px;
        
        text-align: center;
        line-height: 50px;
    }
    
    .col-8 {
    	width: 100%;
    }
    .col-1 {
    	width: 8.333%;
    }
    
    <!DOCT YPE>
    <html lang="en">
    	<head>
    	
    		<meta charset="UTF-8">
    		<meta content="chrome=1" http-equiv="X-UA-Compatible">
    		<meta content="width=device-width" name="viewport">
    		<meta name="keywords" content="">
    		<meta name="description" content="">
    		
    		<title>MWB Computers</title>
    		
    		<link rel="stylesheet" type="text/css" href="stylesheets/custom-grid.css" media="all">
    		
    		<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
    		
    	</head>
    	<body>
    	
    		<div class="container">
    			<div id="row">
    				<div class="col-8">100%</div>
    			</div>
    			<div id="row">
    				<div class="col-1">8.33%</div>
    				<div class="col-1">8.33%</div>
    				<div class="col-1">8.33%</div>
    				<div class="col-1">8.33%</div>
    				<div class="col-1">8.33%</div>
    				<div class="col-1">8.33%</div>
    				<div class="col-1">8.33%</div>
    				<div class="col-1">8.33%</div>
    				<div class="col-1">8.33%</div>
    				<div class="col-1">8.33%</div>
    			</div>
    		</div>
    	
    	</body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    [class*="col-"] is not a css selector. It looks like jquery.

    If your trying to add the padding to all classes that start with col- you should just reference each one:
    .col-8, .col-1 {....}

    P.S.
    padding-left 20px; will not show up for col-8(?) and in col-1 you are also fighting text-align: center; so it will be hard to see.
    Last edited by sunfighter; 08-14-2013 at 07:18 PM.
    Evolution - The non-random survival of random variants.


  •  

    Tags for this Thread

    Posting Permissions

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