0 Replies - 1307 Views - Last Post: 07 October 2012 - 01:44 PM

#1 playthalius  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 26
  • Joined: 26-September 12

Problems with dividing paragraphs into two columns

Posted 07 October 2012 - 01:44 PM

I am fairly new at html and css. I have been working on an assignment for class and I have everything working correctly except where I need the paragraphs in the div element to split into two columns. It works in firefox but will not work in internet explorer.

here is the htm file
<!DOCTYPE html>
<html>

   <head>
   <!--
      New Perspectives on HTML and CSS
      Tutorial 5
      Case Problem 2

      February at the Chamberlain Civic Center
      Author: 
      Date: 10/01/12  

      Filename:         feb.htm
      Supporting files: bottom.jpg, bottomleft.jpg, bottomright.jpg, calendar.css, 
                        ccc.css, ccc.jpg, left.jpg, modernizr-1.5.js, 
                        right.jpg, tab.jpg, top.jpg, topleft.jpg, topright.jpg

   -->

      <meta charset="UTF-8" />
      <title>February at the Chamberlain Civic Center</title>
      <script src="modernizr-1.5.js"></script>
	  <!-- Step 2 -->
	  <link rel="stylesheet" type="text/css" href="calendar.css">
	  <link rel="stylesheet" type="text/css" href="ccc.css">

   </head>

   <body>

      <header>
         <img src="ccc.jpg" alt="The Chamberlain Civic Center" />
      </header>

      <nav>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Box Office</a></li>
            <li><a href="#">Facilities</a></li>
            <li><a href="#">Directions</a></li>
            <li><a href="#">Contact Us</a></li>
         </ul>
      </nav>

      <section id="summary">
         <h1>Coming in February</h1>

         <div>
         <p>February will be another banner month at the Chamberlain Civic 
            Center with a two day performance of the Tony Award winning 
            musical, <i>West Side Story</i> by the Broadway Touring Company. 
            Tickets are going fast, so order yours today.
         </p>

         <p>Celebrate Valentine's Day with the Chamberlain Symphony and 
            their special selection of classical music for lovers. The next 
            day, exercise your mind by attending the Charles Dickens classic,
            <i>The Mystery of Edwin Drood</i>.
         </p>

         <p>Jazz lovers have a lot to celebrate in February with a visit 
            from the <i>Jazz Masters</i> on February 10th, and then on February 
            21st, enjoy the music of The Duke with an <i>Ellington Tribute</i> 
            performed by the Jazz Company of Kansas City.
         </p>

         <p>Pins, bottles, plates, and chairs are flying at the Chamberlain 
            Civic Center in February. The <i>Taiwan Acrobats</i> return with 
            another amazing performance. Then, on February 25th, the <i>Madtown 
            Jugglers</i> get into the act with their unique blend of comedy, 
            juggling, and madness.
         </p>

         <p>Enjoy a classical brunch every Sunday in February with music 
            provided by the <i>Carson Quartet</i>. Seating is limited, so please order 
            your table in advance.
         </p>
         </div>

      </section>


      <section id="events">
		<!-- Step 3 -->
		<table class="calendar">
				<caption>Events in February at the CCC</caption>
				<!-- Step 4 -->
				<colgroup>
					<col class="weekdays" span="5">
					<col class="weekends" span="2">
				</colgroup>
				<!-- Step 5 -->
				<thead>
					<tr>
						<th>Sun</th>
						<th>Mon</th>
						<th>Tue</th>
						<th>Wed</th>
						<th>Thu</th>
						<th>Fri</th>
						<th>Sat</th>
					</tr>
				</thead>
				<!-- Step 6 -->
				<tbody>
					<tr>
						<!-- Step 7 -->
						<td><h3>26</h3></td>
						<td><h3>27</h3></td>
						<td><h3>28</h3></td>
						<td><h3>29</h3></td>
						<td><h3>30</h3></td>
						<td><h3>31</h3></td>
						<td>
							<h3>1</h3>
							<dl>
								<dt>Taiwan Acrobats</dt>
								<dd>8 pm</dd>
								<dd>$16/$24/$36</dd>
							</dl>
						</td>
					</tr>
					<tr>
						<td>
							<h3>2</h3>
							<dl>
								<dt>Carson Quartet</dt>
								<dd>8 pm</dd>
								<dd>$8</dd>
							</dl>
						</td>
						<td><h3>3</h3></td>
						<td><h3>4</h3></td>
						<td>
							<h3>5</h3>
							<dl>
								<dt>Joey Gallway</dt>
								<dd>8 pm</dd>
								<dd>$16/$24/$36</dd>
							</dl>
						</td>
						<td><h3>6</h3></td>
						<td>
							<h3>7</h3>
							<dl>
								<dt>West Side Story</dt>
								<dd>7 pm</dd>
								<dd>$24/$36/$64</dd>
							</dl>
						</td>
						<td>
							<h3>8</h3>
							<dl>
								<dt>West Side Story</dt>
								<dd>7 pm</dd>
								<dd>$24/$36/$64</dd>
							</dl>
						</td>
					</tr>
					<tr>
						<td>
							<h3>9</h3>
							<dl>
								<dt>Carson Quartet</dt>
								<dd>8 pm</dd>
								<dd>$8</dd>
							</dl>
						</td>
						<td>
							<h3>10</h3>
							<dl>
								<dt>Jazz Masters</dt>
								<dd>8 pm</dd>
								<dd>$18/$24/$32</dd>
							</dl>
						</td>
						<td><h3>11</h3></td>
						<td><h3>12</h3></td>
						<td>
							<h3>13</h3>
							<dl>
								<dt>Harlem Choir</dt>
								<dd>8 pm</dd>
								<dd>$18/$24/$32</dd>
							</dl>
						</td>
						<td>
							<h3>14</h3>
							<dl>
								<dt>Chamberlain Symphony</dt>
								<dd>8 pm</dd>
								<dd>$18/$24/$32</dd>
							</dl>
						</td>
						<td>
							<h3>15</h3>
							<dl>
								<dt>Edwin Drood</dt>
								<dd>8 pm</dd>
								<dd>$24/$36/$44</dd>
							</dl>
						</td>
					</tr>
					<tr>
						<td>
							<h3>16</h3>
							<dl>
								<dt>Carson Quartet</dt>
								<dd>8 pm</dd>
								<dd>$8</dd>
							</dl>
						</td>
						<td><h3>17</h3></td>
						<td><h3>18</h3></td>
						<td>
							<h3>19</h3>
							<dl>
								<dt>The Yearling</dt>
								<dd>7 pm</dd>
								<dd>$8/$14/$18</dd>
							</dl>
						</td>
						<td><h3>20</h3></td>
						<td>
							<h3>21</h3>
							<dl>
								<dt>An Ellington Tribute</dt>
								<dd>8 pm</dd>
								<dd>$24/$32/$48</dd>
							</dl>
						</td>
						<td>
							<h3>22</h3>
							<dl>
								<dt>Othello</dt>
								<dd>8 pm</dd>
								<dd>$18/$28/$42</dd>
							</dl>
						</td>
					</tr>
					<tr>
						<td>
							<h3>23</h3>
							<dl>
								<dt>Carson Quartet</dt>
								<dd>8 pm</dd>
								<dd>$8</dd>
							</dl>
						</td>
						<td><h3>24</h3></td>
						<td>
							<h3>25</h3>
							<dl>
								<dt>Madtown Jugglers</dt>
								<dd>8 pm</dd>
								<dd>$12/$16/$20</dd>
							</dl>
						</td>
						<td><h3>26</h3></td>
						<td><h3>27</h3></td>
						<td>
							<h3>28</h3>
							<dl>
								<dt>Ralph Williams</dt>
								<dd>8 pm</dd>
								<dd>$32/$48/$64</dd>
							</dl>
						</td>
						<td>
							<h3>1</h3>
							<dl>
								<dt>Othello</dt>
								<dd>8 pm</dd>
								<dd>$18/$28/$42</dd>
							</dl>
						</td>
					</tr>
				</tbody>
			</table>						


      </section>

      <footer>
         <address>
            The Chamberlain Civic Center &nbsp;&nbsp;&nbsp;
            2011 Canyon Drive &nbsp;&nbsp;&nbsp;
            Chamberlain, SD 53725 &nbsp;&nbsp;&nbsp;
            (605)555-8741
         </address>
      </footer>

   </body>

</html>




here is the ccc.css file

/*
   New Perspectives on HTML and CSS
   Tutorial 5
   Case Problem 2

   Chamberlain Civic Center Style Sheet


   Filename:         ccc.css
   Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg, left.jpg
                     tab.jpg, top.jpg, topleft.jpg, topright.jpg, right.jpg

*/



/* Default Styles */

* {
   list-style: none;
   margin: 0px;
   padding: 0px;
}

header, nav, section {
   display: block;
}


/* Body Styles */
body {
   font-family: Verdana, Geneva, sans-serif;
   margin: 0px auto;
   width: 730px;
}



/* Navigation Styles */

nav {
   margin-top: -3px;
}

nav ul {
   border-bottom: 1px solid red;
   height: 20px;
}

nav ul li {
padding: 0px;
   float: left; 
   margin: 0px 3px; 
   width: 100px; 
   line-height: 20px;
   height: 20px; 
   text-align: center; 
   background: url(tab.jpg) no-repeat top left;
}

nav ul li a {
   display: block; 
   width: 100px; 
   font-size: 10px; 
   text-decoration: none; 
   color: black;
}

nav ul li:hover {
   background: url(tabred.jpg) no-repeat top left;
}




/* Summary Section */

#summary {
   width: 700px;
}

#summary h1 {
   color: red; 
   font-size: 24px; 
   font-weight: normal;
   letter-spacing: 5px;
   margin: 10px;
}

#summary p {
   font-size: 12px; 
   margin: 10px 0px 10px 10px;
   text-align: justify;
}

#summary p i  {
   color: red; 
   font-style: normal;
}




/* Coming Events Section */

#events {
   margin: 0px auto;
}

footer {
   width: 720px;
}

footer address {
   border-top: 1px solid red;
   font-size: 10px;
   font-style: normal;
   text-align: center;
}





And here is the calendar.css file( the one that I am having troubles with)
/*
   New Perspectives on HTML and CSS
   Tutorial 5
   Case Problem 2

   CCC Calendar Table style sheet
   Author: 
   Date: 10/01/12  

   Filename:         calendar.css
   Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg,
                     left.jpg, right.jpg, top.jpg,
                     tab.jpg, topleft.jpg, topright.jpg, redtab.jpg

*/

/* step 8 */
.calendar { border-spacing: 5px; }

/* step 9 */
.calendar { background: url("topleft.jpg") no-repeat left top, url("topright.jpg") no-repeat right top, url("bottomleft.jpg") no-repeat left bottom, url("bottomright.jpg") no-repeat right bottom, url("top.jpg") repeat-x left top, url("left.jpg") repeat-y left top, url("right.jpg") repeat-y right top, url("bottom.jpg") repeat-x left bottom; margin: 20px auto 5px; padding: 40px; width: 650px; font-size: 8px; }

/* step 10 */
.calendar caption { text-align: center; padding-bottom: 10px; font-size: 16px; letter-spacing: 3px; width: 650px; }

/* step 11 */
.weekends { width: 14%; background-color: rgb(255,232,232); }
.weekdays { width: 14%; }

/* Step 12 */
.calendar thead { background-color: red; color: white; letter-spacing: 5px; }

/* step 13 */
.calendar thead { height: 5px; } 
.calendar tbody { height: 19%; }

/* step 14 */
.calendar td { border: 1px solid grey; vertical-align: top; }

/* step 15 */
.calendar h3 { font-size: 8px; }

/* step 16 */ /* This is where my problem is. It seems functionaqol to me but idk. */
div { column-width: 300px; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-rule: 1px solid black; -webkit-column-rule: 1px solid black; column-rule: 1px solid black; }







Is This A Good Question/Topic? 0
  • +

Page 1 of 1