BlueOwlCreative » Topic: Padding within columns http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/feed/ Fri, 17 Jul 2026 20:59:18 +0000 http://bbpress.org/?v=2.5.3-5249 en-US http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/#post-21713 <![CDATA[Padding within columns]]> http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/#post-21713 Sun, 08 Feb 2015 15:27:54 +0000 Corina Hi I’ve done a layout which has background colours on each of 3 columns which take up the width of the main content area (I have a sidebar). Adding padding to my checklist so it doesn’t touch the left edge of the column has meant the layout breaks and the third column drops to the next row. What’s the best (simplest) way to achieve this, apart from redeclaring different column widths in skeleton.css

<div class=”row”>

<div class=”four columns alpha” style=”background-color: #D0E4A8; padding-left:10px;”>
[checklist type="arrowed"]
<ul class=”checked”>

  • Reception (age 5)
  • Year 1 (age 6)
  • Year 2 (age 7)

    • [/checklist]
    </div>

    <div class=”four columns” style=”background-color: #d9f0ff; padding-left:10px;”>
    [checklist type="arrowed"]
    <ul class=”checked”>

  • Reading and Comprehension
  • Writing and Spelling
  • Phonics
  • SATs Preparation

    • [/checklist]
    </div>

    <div class=”four columns omega” style=”background-color: #D0E4A8; padding-left:10px;”>
    [checklist type="arrowed"]
    <ul class=”checked”>

  • 80 minute lessons
  • Small groups
  • One on one tutoring

    • [/checklist]
    </div>

    </div>

    ]]>     http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/#post-21714 <![CDATA[Reply To: Padding within columns]]> http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/#post-21714 Sun, 08 Feb 2015 15:31:19 +0000 Corina http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/#post-21736 <![CDATA[Reply To: Padding within columns]]> http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/#post-21736 Mon, 09 Feb 2015 16:22:31 +0000 BlueOwl Hi,

    Use the CODE button to wrap your Code. :)

    ]]>     http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/#post-21738 <![CDATA[Reply To: Padding within columns]]> http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/#post-21738 Mon, 09 Feb 2015 20:33:15 +0000 Corina <div class="row"> <div class="four columns alpha" style="background-color: #d0e4a8; padding-left: 10px;"> [checklist type="arrowed"] <ul class="checked"> <li>Reception (age 5)</li> <li>Year 1 (age 6)</li> <li>Year 2 (age 7)</li> </ul> [/checklist] </div> <div class="four columns" style="background-color: #d9f0ff; padding-left: 10px;"> [checklist type="arrowed"] <ul class="checked"> <li>Addition and Subtraction</li> <li>Multiplication and Division</li> <li>Fractions/Decimals/Percentages</li> <li>2D and 3D Shape</li> <li>Data Handling</li> <li>Measurement</li> <li>Time and Money</li> <li>Mental Maths</li> <li>Problem Solving</li> </ul> [/checklist] </div> <div class="four columns omega" style="background-color: #d0e4a8; padding-left: 10px;"> [checklist type="arrowed"] <ul class="checked"> <li>80 minute lessons</li> <li>Small groups</li> <li>One on one tutoring</li> </ul> [/checklist] </div> </div> ]]> http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/#post-21764 <![CDATA[Reply To: Padding within columns]]> http://blueowlcreative.com/support_wp/forums/topic/padding-within-columns/#post-21764 Thu, 12 Feb 2015 10:31:50 +0000 BlueOwl Here you go:

    <div class="row">
<div class="four columns alpha">
<div style="background-color: #d0e4a8; padding: 10px;">
[checklist type="arrowed"]
<ul class="checked">
	<li>Reception (age 5)</li>
	<li>Year 1 (age 6)</li>
	<li>Year 2 (age 7)</li>
</ul>
[/checklist]
</div>
</div>
<div class="four columns">
<div style="background-color: #d9f0ff; padding: 10px;">
[checklist type="arrowed"]
<ul class="checked">
	<li>Addition and Subtraction</li>
	<li>Multiplication and Division</li>
	<li>Fractions/Decimals/Percentages</li>
	<li>2D and 3D Shape</li>
	<li>Data Handling</li>
	<li>Measurement</li>
	<li>Time and Money</li>
	<li>Mental Maths</li>
	<li>Problem Solving</li>
</ul>
[/checklist]
</div>
</div>
<div class="four columns omega">
<div style="background-color: #d0e4a8; padding: 10px;">
[checklist type="arrowed"]
<ul class="checked">
	<li>80 minute lessons</li>
	<li>Small groups</li>
	<li>One on one tutoring</li>
</ul>
[/checklist]
</div>
</div>
</div>
    ]]>